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 方法。

##简单请求（能不能不发送options）

在正式跨域的请求前，浏览器会根据需要，发起一个“PreFlight”（也就是Option请求），用来让服务端返回允许的方法（如get、post），被跨域访问的Origin（来源，或者域），还有是否需要Credentials(认证信息）

三种场景：

如果跨域的请求是Simple Request（简单请求 ），则不会触发“PreFlight”。Mozilla对于简单请求的要求是：

以下三项必须都成立：

1. 只能是Get、Head、Post方法
2. 除了浏览器自己在Http头上加的信息（如Connection、User-Agent），开发者只能加这几个：Accept、Accept-Language、Content-Type、。。。。

3. Content-Type只能取这几个值：

   application/x-www-form-urlencoded

   multipart/form-data

   text/plain

##如何操作

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';
}
           

#Springboot配置代码

@Configuration
public class CorsConfig {
    @Bean
    public FilterRegistrationBean corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration config = new CorsConfiguration();
        config.setAllowCredentials(true);
        // 设置你要允许的网站域名，如果全允许则设为 *
        config.addAllowedOrigin("http://localhost:4200");
        // 如果要限制 HEADER 或 METHOD 请自行更改
        config.addAllowedHeader("*");
        config.addAllowedMethod("*");
        source.registerCorsConfiguration("/**", config);
        FilterRegistrationBean bean = new FilterRegistrationBean(new CorsFilter(source));
        // 这个顺序很重要哦，为避免麻烦请设置在最前
        bean.setOrder(0);
        return bean;
    }
}
           

#Node express配置代码

var app = express();

//设置跨域访问
app.all('*', function (req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "X-Requested-With");
    res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
    res.header("X-Powered-By", ' 3.2.1')
    res.header("Content-Type", "application/json;charset=utf-8");
    next();
});
app.listen(6064);