XMLHttpRequest会遵守同源策略(same-origin policy). 也即脚本只能访问相同协议/相同主机名/相同端口的资源, 如果要突破这个限制, 那就是所谓的跨域, 此时需要遵守CORS(Cross-Origin Resource Sharing)机制。
其实跨域分为 简单跨域请求和复杂跨域请求:
简单跨域请求是不会发送options请求的,
那么, 什么情况下请求会变成preflighted request呢?
复杂跨域请求会发送一个预检请求options
preflighted request在发送真正的请求前, 会先发送一个方法为OPTIONS的预请求(preflight request), 用于试探服务端是否能接受真正的请求,如果options获得的回应是拒绝性质的,比如404403500等http状态,就会停止post、put等请求的发出。
复杂跨域请求要满足以下:
1、请求方法不是GET/HEAD/POST
2、POST请求的Content-Type并非application/x-www-form-urlencoded, multipart/form-data, 或text/plain
3、请求设置了自定义的header字段
如果你的跨域请求失败, 原因是预请求得不到正确响应
-
检查预请求, (那个 options 请求)的三个请求头
Origin
,Access-Control-Allow-Headers
,Access-Control-Request-Method
服务端分别加上
Access-Control-Allow-Origin: <预请求的 Origin 内容 | * >
,
Access-Control-Request-Headers:<预请求的Access-Control-Request-Headers内容>
Allow:<预请求的Access-Control-Request-Method的内容>
这几个响应头
2 开发环境中设置代理可以解决跨域问题