1、问题描述
具体情况为前后端分离项目,后端在控制器上已经加上了@CrossOrigin注解,但前端请求后端接口时仍出现跨域问题
2、问题追溯
前端代码:
this.$http({
url: this.$http.adornUrl('/user/register'),
method: 'post',
headers:{
"Content-Type": 'application/json;charset=utf-8', // 解决415问题
},
data: JSON.stringify(params)
}).then()
axios配置:
const http = axios.create({
timeout: 1000 * 30,
withCredentials: true, // 当前请求为跨域类型时是否在请求中协带cookie
})
后台代码:
@CrossOrigin
@RestController
@RequestMapping("/user")
public class UserController {
@Autowired
private UserService iUserService;
@PostMapping("register")
public Result register(@RequestBody UserBody userBody) {
return iUserService.register(userBody);
}
}
首先后台控制器请求参数使用了**@RequestBody这个注解**,这需要前端传入json格式的数据
由于前端form表单默认的传参方式为application/x-www-form-urlencoded,所以请求后端接口时会出现Content type 'application/x-www-form-urlencoded;charset=UTF-8' not supported
这样一个数据请求 contentType 与后端不一致的415错误
所以我在前端请求中设置了"Content-Type": 'application/json;charset=utf-8'
这样一个请求头以解决这个错误
tips:加上这个请求头便使得了这个请求变为复杂请求(详见下)
然而解决了415问题之后,请求还是失败,这回变成了CORS错误,便是开篇所展示的错误
查阅资料后发现CORS请求默认不发送Cookie和HTTP认证信息,如果要把Cookie发到服务器,一方面要服务器同意,指定Access-Control-Allow-Credentials字段,另一方面,开发者必须在AJAX请求中打开withCredentials属性。否则,即使服务器同意发送Cookie,浏览器也不会发送。或者,服务器要求设置Cookie,浏览器也不会处理。显然在请求中携带cookie显然是很常见的操作,所以我在axios设置中开启了withCredentials设置
问题就出现在这里了如果要发送Cookie,Access-Control-Allow-Origin就不能设为星号,必须指定明确的、与请求网页一致的域名
这也就是页面控制台错误信息中所表达的意思
3、总结归纳
- 当前端配置
withCredentials=true
时, 后端配置Access-Control-Allow-Origin
不能为*
, 必须是相应地址 - 当配置
withCredentials=true
时, 后端需配置Access-Control-Allow-Credentials
- 当前端配置请求头时, 后端需要配置
Access-Control-Allow-Headers
为对应的请求头集合- 该字段可选。CORS请求时,XMLHttpRequest对象的getResponseHeader()方法只能拿到6个基本字段:Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。如果想拿到其他字段,就必须在Access-Control-Expose-Headers里面指定。
即=》如果跨域需要携带cookie去请求,Access-Control-Allow-Credentials
必须为true,但是需要注意当Access-Control-Allow-Credentials=true
时,Access-Control-Allow-Origin
就不能为” * “ ,必须是明确的域名
# 服务端允许访问的域名
Access-Control-Allow-Origin=https://idss-uat.jiuyescm.com
# 服务端允许访问Http Method
Access-Control-Allow-Methods=GET, POST, PUT, DELETE, PATCH, OPTIONS
# 服务端接受跨域带过来的Cookie,当为true时,origin必须是明确的域名不能使用*
Access-Control-Allow-Credentials=true
# Access-Control-Allow-Headers 表明它允许跨域请求包含content-type头
Access-Control-Allow-Headers=Content-Type,Accept
# 跨域请求中预检请求(Http Method为Option)的有效期,20天,单位秒
Access-Control-Max-Age=1728000