解决 vue + axios 部署时跨域问题

解决 vue + axios 部署时跨域问题

最近接了一个线上文化周的项目,后端采用 NestJS 并已允许跨域,前端使用 Vue 并用 axios 请求,本机调试正常,但在测试机部署时发生了跨域问题,可以采用 Nginx 代理来解决。

更改 axios 请求地址

main.ts 中创建 axios 的 baseURL 改为挂载在同域下的一个子目录,如 /api

为了方便配置,可以将其作为参数加入环境变量中

Nginx 代理

代理上述子目录 (/api),在 location 下匹配即可

1
2
3
4
5
6
7
8
9
10
11
12
13
location / {
root /var/www/xxx;
index index.html index.htm;
}

location /api {
rewrite ^/api/(.*)$ /$1 break;
proxy_pass http://localhost:xxxx;
proxy_set_header Host $proxy_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Via "nginx";
}

Comments

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×