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';
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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;
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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)
URL 说明 是否允许通信
http://www.a.com/a.js
http://www.a.com/b.js 同一域名下 允许
http://www.a.com/lab/a.js
http://www.a.com/script/b.js 同一域名下不同文件夹 允许
http://www.a.com:8000/a.js
http://www.a.com/b.js 同一域名，不同端口 不允许
http://www.a.com/a.js
https://www.a.com/b.js 同一域名，不同协议 不允许
http://www.a.com/a.js
域名和域名对应ip 不允许
http://www.a.com/a.js
http://script.a.com/b.js 主域相同，子域不同 不允许
http://www.a.com/a.js
http://a.com/b.js 同一域名，不同二级域名（同上）不允许（cookie这种情况下也不允许访问）
http://www.cnblogs.com/a.js
http://www.a.com/b.js 不同域名 不允许