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) 请求方法是以下三种方法之一：

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

认为满足以上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;
          }
        }
    }

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

参考资料:

http://www.ruanyifeng.com/blog/2016/04/same-origin-policy.html

http://www.ruanyifeng.com/blog/2016/04/cors.html