CORS跨域问题

我在使用cors解决跨域问题。

cors跨域问题如下面postman访问后端获得的response-headers

按理说，浏览器需要根据response的headers判断是否可以跨域访问这个资源点。也就是说vue的request请求要到后端的。

但是我现在前端vue的请求根本到不了后端

我判断前端请求是否到达后端根据两个地方的日志
1. 1.一个是全局请求拦截器，我在这里设置的cors请求头

1. 2.另一个地方是controller中的日志

结果，postman请求都有日志，但上面但vue请求接口都没有日志。

我尝试做了两个猜测：

Chrome浏览器在访问出现跨域时，直接选择block。但很快否定了这个想法，因为它和MDN文档描述但跨域协议相冲突。
Vue项目真正方法但后端接口不是localhost:8080/vue-admin-template/user/login，就像使用了代理一样访问的是另一个地址。但经过仔细盘查，觉得这也不太可能。

补充：选择使用CORS解决跨域问题，是经过仔细考虑过的。希望获得大家的帮助，看看这里到底是什么问题。。表示感谢，请喝可乐。。

_noble 2020-11-03

源自：CMS电商管理系统前端搭建 3-5 使用LinCMSVue内置的axios请求API接口

收起

3回答

7七月回答被采纳获得+3积分 2020-11-03 18:46:27

这问题基本靠贴代码看不出问题。

你其实可以参考下LinCMS的，里面有文件上传和跨域处理

收起回答

7七月 2020-11-03 16:41:27

现在一般服务器大部分都是CORS跨域方案

Chrome浏览器会首先发一个options请求，这个请求需要返回允许的域名，然后才会发送真正的请求

你加的这段代码，是否Options请求的时候生效了返回了域，核对下

收起回答

提问者 _noble #1

我自己使用jquery做了一个测试，put请求跨域是成功。(怎样才能把图片加在这里？)正常情况下put肯定需要option请求探测，既然能请求成功这说明(Springboot跨域配置没有问题？我都不敢相信任何信息了。今天在公司把跨域调了一天什么结果都没得到，周边没有前端的同事，又都是偏向数据分析的，都不太了解跨域的问题。。。) 我把调试代码贴下来： <body> <input type="button" value="GET" onclick="getData()"> <input type="button" value="PUT" onclick="putData()"> <script> function getData() { $.get('http://localhost:8080/vue-admin-template/user/login', function (msg){ $("#app").html(msg); }) } function putData(){ $.ajax({ type: 'put', url: 'http://localhost:8080/vue-admin-template/user/login', success: function (msg){ $("#app").html(msg); } }) } </script> </body>

2020-11-03 17:19:13
提问者 _noble #2

<body> <input type="button" value="GET" onclick="getData()"> <input type="button" value="PUT" onclick="putData()"> <script> function getData() { $.get('http://localhost:8080/vue-admin-template/user/login', function (msg){ $("#app").html(msg); }) } function putData(){ $.ajax({ type: 'put', url: 'http://localhost:8080/vue-admin-template/user/login', success: function (msg){ $("#app").html(msg); } }) } </script> </body>

2020-11-03 17:19:28
提问者 _noble #3

天呐，没有格式化也不能贴图片，有没有更好的沟通工具。。。。

2020-11-03 17:20:21

提问者 _noble 2020-11-03 15:32:18

@Override
public void addCorsMappings(CorsRegistry registry) {
    registry.addMapping("/**")
            .allowedOrigins("*")
            .allowedMethods("GET", "HEAD", "POST", "PUT", "DELETE", "OPTIONS")
            .allowCredentials(true)
            .maxAge(3600)
            .allowedHeaders("*");
}