CORS 跨域问题, 以及作为api server 的正确配置, 后台 nginx 配置

服务器的同源策略:为了安全性浏览器有一个同源策略, 一个域名下的应用使用许多数据或者请求的获取, 被限制在同一域名, 协议, 端口, 不然浏览器不会允许请求这些资源, 直接请求就发不出去。同源的3种行为:（1） Cookie、LocalStorage 和 IndexDB 无法读取。（2） DOM 无法获得。（3） AJAX 请求不能发送。但是随着互联网的发展, 我们确实需要资源或者服务分布到不同的域当中, 比如前后端分离后, 前端应用和后端的API服务器可能就处于不同的域下。要跨域去获取数据有3中方法: JSONP, WebSocket, CORS。 这里主要讲CORS的使用与配置。CORS 使用简介:为了满足新时期的需求, W3C拟定了新的标准, "跨域资源共享"（Cross-origin resource sharing）来使得我们可以实现跨域访问。这里需要注意的是, 这个新的协议完全是由 浏览器 和 服务端 来决定的, 而对于前端开发者来说是完全隐藏了细节的, 前端开发者这里不需要增加任何额外的工作, 浏览器会自动的识别请求是否是跨域请求, 从而与服务端完成通信, 所以只需要后端开发者正确的设置后。CORS 类型与通信过程:浏览器会将CORS请求分成2类: 简单请求 和 非简单请求。对于非简单请求, 浏览器会在正式发出请求前, 多发送一次"预检"请求( preflight )用于询问服务端是否允许非简单请求, 如果服务端允许, 浏览器才会发送请求过去。1) 请求方法是以下三种方法之一：HEADGETPOST（2）HTTP的头信息不超出以下几种字段：AcceptAccept-LanguageContent-LanguageLast-Event-IDContent-Type：只限于三个值

application/x-www-form-urlencoded

、

multipart/form-data

、

text/plain

认为满足以上2条的就是简单请求, 以外都是非简单请求。服务端利用一下3个请求头来控制这次请求是否合法:

Access-Control-Allow-Origin: http://api.bob.com
Access-Control-Allow-Credentials: true
Access-Control-Expose-Headers: FooBar
Content-Type: text/html; charset=utf-8

每一个跨域请求都会被浏览器自动添加一个

Origin: http://api.bob.com

请求头用来表明自己的origin域是哪里, 然后服务端就可以根据这个 origin 来判断是否允许请求。对应的服务端如果允许这个请求, 那么必须添加

Access-Control-Allow-Origin: *
( 不一定是 * 但是必须包括请求的origin域 )

请求头来表明自己接受了这个请求, 不然就算成功返回了数据, 浏览器一样会报错:Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.No 'Access-Control-Allow-Origin' header is present on the requested resource。而且返回的 code 可能任然是200。后台如何配置:

后台配置需要配置好这3个头: Access-Control-Allow-Origin, Access-Control-Allow-Credentials, Access-Control-Expose-Headers 就能正常的完成HTTP的跨域通信了。

这里附上nginx的配置:

server{
listen      2000;
server_name  api_server;
root   path_to_app;
charset utf8;

location / {
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' 'POST, GET, PUT, DELETE, OPTIONS';
add_header 'Access-Control-Max-Age' 1728000;
add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';
add_header 'Access-Control-Expose-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';

if ($request_method = 'OPTIONS')
{
return 204;
}
}
}

这里的配置非常简单粗暴, 具体请根据需求来设置。

[/code]参考资料: http://www.ruanyifeng.com/blog/2016/04/same-origin-policy.html http://www.ruanyifeng.com/blog/2016/04/cors.html