NginxCORS跨域解决方案配置

关于CORS可以阅读这篇文章：

https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS

相关的请求头：

Origin: 表明发送请求或者预请求的域（不仅仅是跨域请求,普通请求也会带有ORIGIN头信息）

Access-Control-Request-Method:

在发出预检请求时带有这个头信息,告诉服务器在实际请求时会使用的请求方式

Access-Control-Request-Headers: [, ]*在发出预检请求时带有这个头信息,告诉服务器在实际请求时会携带的自定义头信息.如有多个,可以用逗号分开

以上请求头是由浏览器自动设置的，不需要修改客户端代码

相关响应头：

Access-Control-Allow-Origin: | *允许的请求域（只能配置一个，或使用 * ，意思要么只允许一个域，要么全部。使用 nginx 配置判断可以匹配多个。）

Access-Control-Expose-Headers: X-My-Custom-Header, X-Another-Custom-Header设置浏览器允许访问的服务器的头信息的白名单

Access-Control-Max-Age: 这个头告诉我们这次预请求的结果的有效期是多久

Access-Control-Allow-Credentials: true | false告知客户端,当请求的credientials属性是true的时候,响应是否可以被得到（？？？貌似要携带cookie信息必须设为true）

Access-Control-Allow-Methods: [, ]*指明资源可以被请求的方式有哪些(一个或者多个)

Access-Control-Allow-Headers: [, ]*用来指明在实际的请求中,可以使用哪些自定义HTTP请求头

以上头信息需要配置服务器，根据请求头中的信息判断是否允许跨域，然后返回相应的请求头

nginx 配置

STEP 1 : 创建cors.conf.part 文件，或者直接写到 server/location 下面

# 默认允许的域，比如这里配置为 http://mydomain.com ,那么从 baidu.com localhost 或 # 者 192.168.2.210 过来的都是不允许的 set $cors_header_origin \'http://mydomain.com\'; # 因为 \'Access-Control-Allow-Origin\' 只能指定一个域或者 *，所以将允许的请求域设置到响应头中 # 使用正则匹配请求头中携带的 Origin 信息，判断是否允许访问。这里会允许 http://static.mydomain.com # http://downloads.mydomian.com http://www.mydomain.com 等域访问，相当于通配符 *.mydomain.com if ($http_origin ~* "http[s]?://.*?.mydomain.com") { # 如果是来自允许跨域的域，则更新变量，待后面添加响应头使用 set $cors_header_origin $http_origin; } # 允许的请求方法 set $cors_header_methods \'GET, POST, PUT, DELETE, OPTIONS\'; # 允许的头信息 set $cors_header_headers \'Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,token\'; # 是否相应credientials请求 set $cors_header_credentials \'true\'; # 预请求结果有效时间 set $cors_header_max_age 1728000; # 如果是发出的预请求 if ($request_method = \'OPTIONS\') { add_header \'Access-Control-Allow-Origin\' $cors_header_origin; add_header \'Access-Control-Allow-Methods\' $cors_header_methods; add_header \'Access-Control-Allow-Headers\' $cors_header_headers; add_header \'Access-Control-Allow-Credentials\' $cors_header_credentials; add_header \'Access-Control-Max-Age\' $cors_header_max_age; add_header \'Content-Type\' \'text/plain charset=UTF-8\'; add_header \'Content-Length\' 0; return 204; } # 简单请求配置 POST GET HEAD if ($request_method = \'POST\') { add_header \'Access-Control-Allow-Origin\' $cors_header_origin; add_header \'Access-Control-Allow-Methods\' $cors_header_methods; add_header \'Access-Control-Allow-Headers\' $cors_header_headers; } if ($request_method = \'GET\') { add_header \'Access-Control-Allow-Origin\' $cors_header_origin; add_header \'Access-Control-Allow-Methods\' $cors_header_methods; add_header \'Access-Control-Allow-Headers\' $cors_header_headers; }

STEP 2 : vhosts.conf 虚拟主机配置文件中引入跨域配置

# tomcat server { server_name www.mydomain.com #...... 省略其他配置 location / { # 在 location 内导入刚才我们创建的 cors.conf.part 代码片段 # cors conf include /etc/nginx/conf.d/cors.conf.part; proxy_pass http://tomcat; } } # 下载服务器 server { server_name downloads.mydomain.com #...... 省略其他配置 location / { # 在 location 内导入刚才我们创建的 cors.conf.part 代码片段 # cors conf include /etc/nginx/conf.d/cors.conf.part; root /data/www/downloads; } } # 其他不允许跨域访问的服务器 server { server_name ac.mydomain.com #...... 省略其他配置 location / { # 不导入跨域配置 # include /etc/nginx/conf.d/cors.conf.part; root /data/www/ac; } }