0
点赞
收藏
分享

微信扫一扫

CORS跨域请求出现问题

yongxinz 2022-04-19 阅读 159

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、总结归纳

  1. 当前端配置withCredentials=true时, 后端配置Access-Control-Allow-Origin不能为*, 必须是相应地址
  2. 当配置withCredentials=true时, 后端需配置Access-Control-Allow-Credentials
  3. 当前端配置请求头时, 后端需要配置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
举报

相关推荐

0 条评论