CORS跨域-Nginx使用方法（Access-Control-Allow-Origin错误提示）

问题说明

当出现上图这个的时候，是访问请求外域URL无法访问，浏览器认为访问外域URL不安全，导致访问不了简称跨域问题。而这上面出现一句很重要的话“NO Access-Control-Allow-Origin”，这个是什么？是不是只要添加“Access-Control-Allow-Origin”头就能访问呢？如何添加？会不会有其他问题？

Access-Control-Allow-Origin 表示允许访问的外域 URI

例子：
Access-Control-Allow-Origin: http://www.a.com
允许访问www.a.com站点

Access-Control-Allow-Origin: *
“*”允许访问任何外域URL

这个是由服务端那边设置的，让服务端告知浏览器允许这个站点访问。那就是说只要设置了这个参数，那就能跨域了。而这种跨域方式也就叫CORS。

CORS是一个W3C标准，全称是”跨域资源共享”（Cross-origin resource sharing）。
它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。本文就是谈CORS技术实现。

技术介绍

当我们出现跨域提示的时候，其实我们已经向服务器已经完成一次发送和接收请求（请求是发送连接的url）。服务器接收请求后通知浏览器，告诉浏览器不能访问外域站点。浏览器会显示不能访问原因，显示访问外域失败。

而CORS就是在服务器上，设置Response Headers 返回参数Access-Control-Allow-Origin,Access-Control-Allow-Headers,Access-Control-Allow-Methods，让站点能访问外域。

参数 说明 Control-Allow-Origin 表示允许访问的外域请求。 Access-Control-Allow-Headers 首部字段用于预检请求的响应。其指明了实际请求中允许携带的首部字段。 Access-Control-Allow-Methods 首部字段用于预检请求的响应。其指明了实际请求所允许使用的 HTTP 方法。

---

如何操作

1.看到下图我们发送请求的时候 在Request Headers 中Origin:http://www.a.com，Origin是我们当前站点URL域名。

---

2.Nginx服务器接收后会查看是不是配置CORS，如果是查看配置的域名是不是匹配如下图：http://www.a.com，匹配允许这个站点访问。

---

3.使用CORS发送请求，第一个请求会是”OPTIONS”这个是设置返回头并且返回成功。之后会自动再发一个post/get请求，成功发送到服务器。这样代码以及可以成功跨域了。

---

4.最后在看一下Response Headers 发现Access-Control-Allow-Origin设置http://www.a.com的域名了。代表已经成功设置好CORS了。

---

兼容性

pc兼容ie8以上，手机端上随意用。如果想兼容更低版本浏览器请使用JSONP或者Nginx做代理。

Nginx配置代码

在Nginx中的nginx.cof中添加下面代码就可以实现CORS跨域了。

set $origin '*';#写入需要跨域的请求地址if ($request_method = 'OPTIONS') {    add_header 'Access-Control-Allow-Origin' $origin;    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';    add_header 'Access-Control-Max-Age' 1728000;    add_header 'Content-Type' 'text/plain charset=UTF-8';    add_header 'Content-Length' 0;    return 204;}if ($request_method = 'POST') {    add_header 'Access-Control-Allow-Origin' $origin;    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';    add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';}if ($request_method = 'GET') {    add_header 'Access-Control-Allow-Origin' $origin;    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';    add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';}