IT俱乐部 Nginx Nginx跨域访问配置方式(Web反向代理跨域访问配置)

Nginx跨域访问配置方式(Web反向代理跨域访问配置)

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中也提供了跨域访问的配置

详见CorsFilterCorsConfigurationUrlBasedCorsConfigurationSource

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持IT俱乐部。

本文收集自网络,不代表IT俱乐部立场,转载请注明出处。https://www.2it.club/server/nginx/12708.html
上一篇
下一篇
联系我们

联系我们

在线咨询: QQ交谈

邮箱: 1120393934@qq.com

工作时间:周一至周五,9:00-17:30,节假日休息

关注微信
微信扫一扫关注我们

微信扫一扫关注我们

返回顶部