cors跨域问题分析-解决方法笔记

最近项目要用到很多个跨域请求,看了很多个操作,最终还是选择了cors方式,具体的详细信息可以查看官网,通俗易懂的请看http://www.ruanyifeng.com/blog/2016/04/cors.html 这个博客。

 

浏览器将CORS请求分成两类:简单请求(simple request)和非简单请求(not-so-simple request)。

只要同时满足以下两大条件,就属于简单请求。

(1) 请求方法是以下三种方法之一:

  • HEAD
  • GET
  • POST

(2)HTTP的头信息不超出以下几种字段:

  • Accept
  • Accept-Language
  • Content-Language
  • Last-Event-ID
  • Content-Type:只限于三个值application/x-www-form-urlencodedmultipart/form-datatext/plain

凡是不同时满足上面两个条件,就属于非简单请求。

浏览器对这两种请求的处理,是不一样的。

 

 

了解了这两种方式,你就要注意了可能出现的问题,根据问题解决。

 

最简单的方式就是在后端请求的方法里加上:

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Headers: *');
header('Access-Control-Allow-Methods: *');
header('Access-Control-Expose-Headers: *');
header('Access-Control-Allow-Credentials: true');

这样你的简单请求基本上就没问题。

 

注意点:

很多人添加了这些信息,但是还是跨域报错,可能出现的问题:

  1. 非简单请求有一个预请求,“预检”请求用的请求方法是OPTIONS,表示这个请求是用来询问的,你服务端路由必现要允许这个方法请求,否则预请求失败,js 报错也是跨域错误。
  2. 你如果有其他头部验证信息,比如带了JWT token,token验证失败,浏览器无法获取有效数据,也会报跨域错误,可自行查看服务端日志。

 

其他:

  • 如果你是使用laravel 你可以使用这个包,他是个中间件 简单配置就可以实现cors跨域请求,使用方法请看github说明 https://github.com/barryvdh/laravel-cors
    $ composer require barryvdh/laravel-cors