lurenaa的博客

前端小伙伴在请求我后台的json时出现了跨域的报错。最后通过后端添加响应头解决了这个问题,总结一下。

解决办法

1
2
3
4
res->addHeader("Access-Control-Allow-Origin", "*");
res->addHeader("Access-Control-Allow-Methods", "POST, GET, PUT, OPTIONS, DELETE, PATCH");
res->addHeader("Access-Control-Max-Age", "3600");
res->addHeader("Access-Control-Allow-Headers","Origin, X-Requested-With, Content-Type, Accept,token");

cors是浏览器为了安全的规定,在实际环境中是很重要的,但在前后端调试时我们不需要这个安全保障,所以给返回的响应添加上这四个头部让浏览器接受我们的报文就可以了。

每个选项的意思

  • Access-Control-Allow-Origin:携带了服务器端验证后的允许的跨域请求域名,可以是一个具体的域名或是一个*(表示任意域名)。
  • Access-Control-Expose-Headers:允许返回给跨域请求的响应头列表,在列表中的响应头的内容,才可以被浏览器访问。
  • Access-Control-Max-Age: 用于告知浏览器可以将预先检查请求返回结果缓存的时间,在缓存有效期内,浏览器会使用缓存的预先检查结果判断是否发送跨域请求。
  • Access-Control-Allow-Methods:用于告知浏览器可以在实际发送跨域请求时,可以支持的请求方法,可以是一个具体的方法列表或是一个*(表示任意方法)。
  • Access-Control-Allow-Credentials: 该字段可选。它的值是一个布尔值,表示是否允许发送Cookie。默认情况下,Cookie不包括在CORS请求之中。设为true,即表示服务器明确许可,Cookie可以包含在请求中,一起发给服务器。这个值也只能设为true,如果服务器不要浏览器发送Cookie,删除该字段即可。

PS: 如果要发送Cookie,Access-Control-Allow-Origin就不能设为星号,必须指定明确的、与请求网页一致的域名。同时,Cookie依然遵循同源政策,只有用服务器域名设置的Cookie才会上传,其他域名的Cookie并不会上传,且(跨源)原网页代码中的document.cookie也无法读取服务器域名下的Cookie。

另外作为一个完整的后台服务器,我们也应该能够响应客户端的CORS 预检请求。

这个部分MDN上写的很好,这里是链接
在第一次发送post以前,浏览器会先发送一个CORS 预检请求。这是我的日志捕捉到的报文:
在这里插入图片描述
后台按照上面MDN链接中的方式返回报文,然后后台就能收到前台的Post报文了。