Nginx反向代理处理vue项目部署跨域问题
线上部署官网项目时,提示域名存在跨域问题,首先想到的是用Nginx来处理这个问题,处理流程如下:A:www.test.com 【网站访问域名】B:open.test.com 【前端请求接口域名】C:open.test.com/site/index 【B域名下面的一个接口】nginx处理主要是修改网站站点的www.test.com.conf文件server{listen 80;server_name
·
线上部署官网项目时,提示域名存在跨域问题,首先想到的是用Nginx来处理这个问题,处理流程如下:
A:www.test.com 【网站访问域名】
B:open.test.com 【前端请求接口域名】
C:open.test.com/site/index 【B域名下面的一个接口】
nginx处理主要是修改网站站点的www.test.com.conf文件
server
{
listen 80;
server_name www.test.com;
index index.php index.html index.htm default.php default.htm default.html;
root /www/wwwroot/test;
#SSL-START SSL相关配置,请勿删除或修改下一行带注释的404规则
#error_page 404/404.html;
#SSL-END
#ERROR-PAGE-START 错误页配置,可以注释、删除或修改
#error_page 404 /404.html;
#error_page 502 /502.html;
#ERROR-PAGE-END
#PHP-INFO-START PHP引用配置,可以注释或修改
include enable-php-74.conf;
#PHP-INFO-END
#REWRITE-START URL重写规则引用,修改后将导致面板设置的伪静态规则失效
include /www/server/panel/vhost/rewrite/www.test.com.conf;
#REWRITE-END
#禁止访问的文件或目录
location ~ ^/(\.user.ini|\.htaccess|\.git|\.svn|\.project|LICENSE|README.md)
{
return 404;
}
#一键申请SSL证书验证目录相关设置
location ~ \.well-known{
allow all;
}
location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$
{
expires 30d;
error_log off;
access_log /dev/null;
}
location ~ .*\.(js|css)?$
{
expires 12h;
error_log off;
access_log /dev/null;
}
access_log /www/wwwlogs/www.test.com.log;
error_log /www/wwwlogs/www.test.com.error.log;
# 此处是新加的处理代码
location /api/ {
proxy_pass http://open.test.com/;
}
}
此方法是使用反向代理将A域名下面的一些请求指向B,具体处理的方法就是在网站站点的conf文件添加如下代码:
# api可以任意设置,但是要记住这个,后面要使用
location /api/ {
proxy_pass http://open.test.com/;
}
前端使用B域名调用接口要改成A/api,现在前端调用C的接口要就变成:www.test.com/api/site/index这个请求,域名后的api要和上面的保持一致,然后Nginx将请求反向代理请求还是变成C。
更多推荐
已为社区贡献4条内容
所有评论(0)