Nginx跨域访问配置方式(Web反向代理跨域访问配置)
更新时间：2024年06月19日 09:32:05 作者：叹人间，美中不足今方信
这篇文章主要介绍了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中也提供了跨域访问的配置
详见CorsFilter、CorsConfiguration、UrlBasedCorsConfigurationSource
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Nginx服务器设置网站验证访问的方法,通过设置密码来要求登录网站目录的用户进行验证,需要的朋友可以参考下2015-07-07
这篇文章主要介绍了解决nginx重新加载配置文件,配置文件没生效问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-06-06
nginx是一款自由的、开源的、高性能的HTTP服务器和反向代理服务器；这篇文章主要介绍了ubuntu16.04下彻底卸载nginx的相关命令,需要的朋友可以参考下2018-12-12
在有一次配置时发现，请求 uri 明明是符合了前缀匹配 ^~ 规则，但 nginx 却没有使用，这让我对上述结论产生了疑惑。后续通过调研、实践后发现，上述结论可以说对，但也不对，是不是更疑惑了？没关系，看完这篇文章你就知道我为什么会这样说了2022-05-05
这篇文章主要为大家详细介绍了Nginx搭建前端本地预览环境的完整步骤教学,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2025-09-09
本文主要介绍了nginx各种代理配置大全,主要包括了路径配置,http跳转https,微信支付的校验等,具有一定的参考价值,感兴趣的可以了解一下2023-09-09
nginx 是一个高性能的 Web 服务器，之前也写过一些关于 nginx 的文章。为了提高博客的响应速度，可以从设置 nginx 的 gzip 和缓存这2方面入手。为字体开启 gzip 和缓存能大大减少带宽的消耗2017-03-03
Nginx 502 Bad Gateway错误解决详细指南与实例
这篇文章主要介绍了Nginx 502 Bad Gateway错误解决的相关资料,502BadGateway错误是Web开发和运维中常见的错误,表示一个服务器在充当网关或代理时,从上游服务器收到了一个无效的响应,需要的朋友可以参考下2024-11-11
这篇文章主要介绍了详解如何修改nginx的默认端口，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-03-03
nginx中配置https的详细步骤及配置SSL/TLS证书的完整流程
本文将详细介绍如何在 Nginx 服务器上配置 SSL/TLS 证书,包括获取证书、配置 Nginx、强化安全性等完整流程,无论您是使用 Let’s Encrypt 的免费证书还是自签名证书,都能在本指南中找到对应的配置方法,感兴趣的朋友跟随小编一起看看吧2025-10-10
最新评论