专栏首页java 微风springboot&ajax&has been blocked by CORS policy: No 'Access-Control-Allow-Origin

springboot&ajax&has been blocked by CORS policy: No 'Access-Control-Allow-Origin

ajax+springboot解决跨域问题,以下报的错误就是html跨域的问题

Access to XMLHttpRequest at 'http://localhost:8080/user/login1' from origin 'http://localhost:59033' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

springboot解决跨域的问题的两种方法

前端测试代码:

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
 
<body>
<div id="form-div">
    <form id="form1">
        <p>用户名:<input name="email" type="text" id="txtUserName" tabindex="1" size="15" value="" /></p>
        <p>密 码:<input name="password" type="text" id="TextBox2" tabindex="2" size="16" value="" /></p>
        <p><input type="button" value="登录" onclick="login()">&nbsp;<input type="reset" value="重置"></p>
    </form>
</div>
</body>
<script type="text/javascript" src="../static/jquery/jquery-3.3.1.js"></script>
<script type="text/javascript">
    function login() {
        $.ajax({
            //几个参数需要注意一下
            type: "POST", //方法类型
            dataType: "json", //预期服务器返回的数据类型
            url: "http://localhost:8080/user/login1", //url
            data: $('#form1').serialize(),
            success: function(result) {
                console.log(result); //打印服务端返回的数据(调试用)
                if(200 == result.resultCode) {
                    alert("SUCCESS");
                };
            },
            error: function() {
                alert("异常!");
            }
        });
    }
</script>
 
</html>

第一种:写一个class,配置的class

package com.example.demo;
 
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;
 
 
/**
 * Author:Yangjingcheng
 * Date:2018/
 */
@Configuration
public class CorsConfig {
    private CorsConfiguration buildConfig() {
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.addAllowedOrigin("*");
        corsConfiguration.addAllowedHeader("*");
        corsConfiguration.addAllowedMethod("*");
        return corsConfiguration;
    }
 
    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        // 配置所有请求
        source.registerCorsConfiguration("/**", buildConfig());
        return new CorsFilter(source);
    }
}

第二种,在你要访问的Controller的方法上面加上注解 @CrossOrigin

package com.example.demo;
 
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.servlet.ModelAndView;
import java.util.ArrayList;
import java.util.List;
 
@Controller
public class TestController {
 
 
    @CrossOrigin
    @RequestMapping("/user/login1")
    @ResponseBody
    public List<User> userLogin(User user) {
        System.out.println(user);
        ArrayList<User> users = new ArrayList<>();
        for (int i = 0; i < 3; i++) {
            users.add(user);
        }
        return users;
    }
}

OK了

转自:https://blog.csdn.net/lovePaul77/article/details/85681404

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • [原创]SpringSecurity控制授权(鉴权)功能介绍

    ​ spring security中的除了用户登录校验相关的过滤器,最后还包含了鉴权功能的过滤器,还有匿名资源访问的过滤器链,相关的图解如下:

    Dream城堡
  • 对印度某电子商务公司从LFI到数据库获取的渗透测试过程

    本文分享的是作者在渗透测试过程中,通过不同漏洞的组合利用,最终拿下印度某大型电子商务公司数据库权限。(文章已经相关公司许可发布)。

    FB客服
  • 三种对CORS错误配置的利用方法

    同源策略(SOP)限制了应用程序之间的信息共享,并且仅允许在托管应用程序的域内共享。这有效防止了系统机密信息的泄露。但与此同时,也带来了另外的问题。随着Web应...

    FB客服
  • Github项目推荐 | 被昨天的股票吓哆嗦了吗,试试用Trump2Cash帮你赶紧脱坑

    昨天(2019.05.06)的国内股市大家也都看到了,川普的一句推特威力真的太可怕了......(虽然今天涨了一点回去,但是本质上还是亏了呀)

    AI研习社
  • [Paper Reading] Linux Block IO: Introducing Multi-queue SSD Access on Multi-core Systems

    今天看到一篇论文:Linux Block IO: Introducing Multi-queue SSD Access on Multi-core System...

    linjinhe
  • 使用SSRF泄漏云环境中的Metadata数据实现RCE

    本文我将向大家分享一个新的非常有意思的漏洞。利用该漏洞可以为我们泄漏云环境中的Metadata数据,并进一步的实现远程代码执行(RCE )。

    FB客服
  • TNW-获取微信公众号的 access_token

    TNW: TypeScript(The) + Node.js(Next) + WeChat 微信公众号开发脚手架,支持 http 模块扩展、支持任何 Node....

    Javen
  • shiro之深度解析FormAuthenticationFilter

      shiro是我们在项目经常使用到的权限管理框架,本文我们就重点来分析FormAuthenticationFilter的验证过程。

    用户4919348
  • TCGA数据库介绍以及下载方式小结

    美国政府发起的癌症和肿瘤基因图谱(Cancer Genome Atlas,TCGA)计划,试图通过应用基因组分析技术,特别是采用大规模的基因组测序,将人类全部癌...

    用户1359560
  • Java内部类是如何实现的

    本代码主要想说明的是作为内部类的TimePrinter可以直接访问外部类TalkingClock的私有成员变量beep。

    Ryan-Miao

扫码关注云+社区

领取腾讯云代金券