Nginx CORS 跨域解决方案配置

  • 作者:未知
  • 来源:开源中国
  • 2018-03-05 01:18:53

摘要: nginx 通过添加 CORS 所需的 http header 实现跨域访问

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

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

 

相关的请求头:

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

1 (85).jpg

Access-Control-Request-Method: <method>

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

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

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

 

相关响应头:

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

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

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

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

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

Access-Control-Allow-Headers: <field-name>[, <field-name>]*用来指明在实际的请求中,可以使用哪些自定义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; } }

 

免责声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,也不承认相关法律责任。如果您发现本社区中有涉嫌抄袭的内容,请发送邮件至:operations@xinnet.com进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。

免费咨询获取折扣