Nginx跨域访问配置(Web反向代理跨域访问配置)
出于安全的原因,浏览器限制从脚本内发起跨域的HTTP
请求,除非响应报文中包含了允许浏览器解析报文的CORS
响应头
也就是说,响应报文的头中要有以下几个响应头
Nginx
要使用add_header
添加这几个响应头
1.前后端分离的工程
一般情况下是使用Ajax
访问后端接口
Ajax
的请求头为X-Requested-With
因此服务端要允许X-Requested-With
的请求头
add_header 'Access-Control-Allow-Headers' 'X-Requested-With';
2.服务端要配置哪些域
是可以跨域访问到本服务器资源的
add_header 'Access-Control-Allow-Origin' '*';
注意:
- 如果使用了
add_header 'Access-Control-Allow-Credentials' 'true'
- 那么不能使用通配符
add_header 'Access-Control-Allow-Origin' 'www.baidu.com'; add_header 'Access-Control-Allow-Credentials' 'true';
3.服务器端要指定HTTP请求的方法
add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS'
案例
add_header 'Access-Control-Allow-Origin' '*'; add_header 'Access-Control-Allow-Headers' 'X-Requested-With'; add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS' # 由于跨域请求,浏览器会先发送一个OPTIONS的预检请求,我们可以缓存第一次的预检请求的失效时间 if ($request_method = 'OPTIONS') { add_header 'Access-Control-Max-Age' 2592000; add_header 'Content-Type' 'text/plain; charset=utf-8'; add_header 'Content-Length' 0; return 204; }
HTTP
请求头详解点这里查看。
对于跨域的配置,不是只有Nginx
可以配置,在Spring
中也提供了跨域访问的配置
详见CorsFilter
、CorsConfiguration
、UrlBasedCorsConfigurationSource
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持IT俱乐部。