×
新网 > 虚机资讯 > 正文

Nginx CORS 跨域解决方案配置

摘要: 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进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。

免费咨询获取折扣

Loading