CORS方式实现ajax跨域 --- nginx配置

摘要：目前，所有浏览器都支持该功能，浏览器不能低于。因此，实现通信的关键是服务器。如果指定的域名在许可范围内，服务器返回的响应，会多出头信息字段也可能多出其他可选字段或者是表示接受任意域名的请求。

1.画面服务器：192.168.196.6 → tomcat服务
2.js模板服务器：192.168.196.8 → nginx服务
3.画面服务需跨域请求js资源

过程中经过了几次配置，出现过以下错误

1.No "Access-Control-Allow-Origin" header is present on the requested resource,The response had HTTP status code 404
2.No "Access-Control-Allow-Origin" header is present on the requested resource,The response had HTTP status code 405

nginx服务配置(nginx.conf)：

location xxx {

    alias xxx;

    --允许GET请求，GET请求时返回以下头信息
    if ($request_method = "GET") {
        add_header "Access-Control-Allow-Origin" "*";
        add_header "Access-Control-Allow-Headers" "X-Requested-With";
    }

    --允许预检请求，预检请求时返回以下头信息
    if ($request_method = "OPTIONS") {
        add_header "Access-Control-Allow-Origin" "*";
        add_header "Access-Control-Allow-Methods" "GET, POST, OPTIONS";
        add_header "Access-Control-Allow-Headers" "X-Requested-With";
        add_header "Content-Length" 0;
        return 204;
    }
}

分析：
1.我的跨域请求是GET方法，所以只配置GET就好用了。
2.我的请求是非简单请求，所以需要给预检请求(OPTIONS)配置接口。

CORS是一个W3C标准，全称是Cross-origin resource sharing（跨域资源共享）。
CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。
因此，实现CORS通信的关键是服务器。只要服务器实现了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-urlencoded、multipart/form-data、text/plain

请求过程
1.浏览器直接发出CORS请求。跟普通请求相比，增加一个Origin字段。

  GET /cors HTTP/1.1
  Origin: http://192.168.196.160
  Host: xxx
  Accept-Language: xxx
  Connection: xxx
  User-Agent: xxx

2.如果Origin指定的域名在许可范围内，服务器返回的响应，会多出头信息字段Access-Control-Allow-Origin（也可能多出其他可选字段）

 Access-Control-Allow-Origin: http://192.168.196.160  //或者是 *,表示接受任意域名的请求。
 Content-Type: text/html; charset=utf-8
 

简单请求以外就是非简单请求。非简单请求就是对服务器有特殊的请求，比如请求方法是PUT或DELETE,或者Content-Type字段类型是application/json。

非简单请求会在请求之前增加"预检"请求(prelight)。

预检请求

浏览器询问服务器，当前网页所在域名是否在服务器访问许可名单(Origin)，是否允许该请求方法(Access-Control-Request-Method)和头信息字段(Access-Control-Request-Headers)。

服务器得到预检请求后，检查Origin，Access-Control-Request-Method，Access-Control-Request-Headers字段，

如果确认允许跨域请求，就可以HTTP回应中带上这三个头信息，如下

   Access-Control-Allow-Origin: 请求源域名或者*
   Access-Control-Allow-Methods: GET, POST, PUT
   Access-Control-Allow-Headers: X-Custom-Header

如果不允许跨域请求，服务器返回正常相应，但是不带cors头信息字段，浏览器就会触发错误如下

   XMLHttpRequest cannot load 请求源域名
   Origin http://api.bob.com is not allowed by Access-Control-Allow-Origin.

预检请求通过后，以后每次浏览器的正常cors请求都跟简单请求一样。请求头信息会带着origin，服务器的响应也都会有头信息字段Access-Control-Allow-Origin。(参考简单请求)

参考：
跨域资源共享 CORS 详解 阮一峰
ajax跨域，这应该是最全的解决方案了 撒网要见鱼