cors处理跨域请求

cors定义

CORS是现代浏览器支持跨域资源请求的一种方式，全称是“跨域资源共享”（Cross-origin resource sharing）。实现CORS通信的关键是服务器。

举个例子

报错信息：

Access to XMLHttpRequest at ‘https://wapi.kuwo.cn/api/sms/mobileLoginCode’ from origin ‘https://h5app.kuwo.cn’ has been blocked by CORS policy: Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response.

解决方案：服务端配置代码：response.setHeader(“Access-Control-Allow-Headers”, "Content-Type ");

小知识点：简单请求

1. 请求方法是以下三种方法之一：HEAD、GET、POST
2. HTTP的头信息不超出以下几种字段：Accept（客户端能接收的资源类型）、Accept-Language（客户端接收的语言类型）、Content-Language（服务端发送的语言类型）、Last-Event-ID、Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain
3. 其他都属于非简单请求

请求流程图-把这个丢给后端同学

1. Access-Control-Allow-Origin 允许哪些域名的脚本访问该资源（是跨域时必须配置的，其他的可选择性配置）
2. Access-Control-Allow-Methods 响应头指定访问资源时允许的一种或多种方法
3. Access-Control-Allow-Headers 浏览器向服务器询问是否支持跨域的自定义header字段时，服务器需要适当的应答
4. Access-Control-Allow-Credentials: true  表示服务器明确许可，Cookie可以包含在请求中，一起发给服务器。
5. Access-Control-Max-Age用来指定本次预检请求的有效期，单位为秒，在此期间不用发出另一条预检请求。

服务端的配置

一开始是这么配的，页面会报前面的错误，所以还不够！

加上下面的配置才ok

JSONP

JSONP是非正式传输协议，它允许用户传递一个callback或者开始就定义一个回调方法，传给服务端，服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据，这样客户端就可以自定义函数来自动处理返回数据了。JSONP只支持GET请求而不支持POST等其它类型的HTTP请求。

总结

借助CORS我们不必关心发出的请求是否跨域，浏览器会处理，但是服务端需要支持CORS，服务端实现CORS的原理也很简单：对请求做上下文处理，已达到接口允许跨域访问的目的。