1.背景
H5项目部署在自己服务器上，后端数据调用第三方。第三方不愿意解决跨域问题文章来源地址https://www.toymoban.com/news/detail-576700.html
- 1.H5项目部署在
a.com - 2.H5项目的所有接口请求由第三方的
c.com改为b.com。 - 3.反向代理用
b.com,由b.com把所有请求转发请求第三方的c.com。加上跨域请求头
2.Nginx配置
server
{
listen 80;
server_name b.com;
index index.php index.html index.htm default.php default.htm default.html;
location / {
if ($request_method = 'OPTIONS') {
add_header 'Access-Control-Allow-Origin' $http_origin;
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
add_header 'Access-Control-Max-Age' 86400;
}
root html;
index index.html index.htm;
proxy_pass http://c.com/;
}
}
3.常见问题
- 1.
vue本地开发有代理的问题，如果路径不一致。打包后现在也会出现接口不能正常访问。关闭本地代理即可 - 2.
Access-Control-Allow-Origin的值用$http_origin，用*出现一些未知问题。 - 3.
if ($request_method = 'OPTIONS')一定要加
文章来源：https://www.toymoban.com/news/detail-576700.html
到了这里，关于Nginx反向代理 跨域问题的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
