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

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

更改 axios 请求地址

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

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

Nginx 代理

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

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";
}

2020-02-10

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

Dev / Frontend

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

更改 axios 请求地址

Nginx 代理

Comments

Tag Cloud

Recent

Categories

Tags

Links

Recent

Categories

Tags

Links

Your browser is out-of-date!