vue使用proxyTable跨域。生产环境的配置

Question

上图是开发环境的配置。
现在项目要部署了，生产环境咋配啊。
、在线等，急急急。。。

---

2021-05-18
开发项目的时候，后端给了我一个接口的地址，但是前端访问会跨域。因为之前没用过proxyTable，一直是设置浏览器可跨域。如下：

这次就想尝试一下用ProxyTable。如上图 config/index.js中dev的跨域配置。
业务代码调用接口是这样写的：
!

所以问题就是，业务代码是这样的
.get('/api?xxx=xx&xxxxxx=xxxxxxx')
那生产环境该怎么配置，才能把业务代码中的/api替换成后端给我的那个接口的地址？

我这边的运维人员解决方案是：把上面dev的proxyTable复制到了build，把build的host改成了项目部署后的地址。这样项目部署后访问接口的路径就对了。

Answer 1

 proxy: {
    '/ftwcm/': {
      target: process.env.BASE_URL, // 目标接口域名
      changeOrigin: true, // 是否跨域
      // pathRewrite: { '^/app/': '' }, // 把/app 替换成 /
    },
    '/v1/': {
      target: process.env.BASE_URL, // 目标接口域名
      changeOrigin: true, // 是否跨域
      // pathRewrite: { '^/app/': '' }, // 把/app 替换成 /
    },
  },

我是这么用的 你参考一下

Answer 2

proxy只在开发环境生效，生产环境需要配置nginx了
proxy

 proxy: {
      '/common-backend': {
        target: `http://xx.xxx.xx.xx:8089/`,
        changeOrigin: true
      }
 }

nginx

server {
    listen       80;
    server_name  commonFronted;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }
    
    location ^~/common-backend/ {
        proxy_pass http://xx.xx.xx.xx:8089/common-backend/;
        # 底下的可省略
        proxy_set_header  Host $host;
        proxy_set_header  X-Real-IP $remote_addr;
        proxy_set_header  X-Forwarded-Proto https;
        proxy_set_header  X-NginX-Proxy true;
        proxy_buffers 256 4k;
        proxy_max_temp_file_size 0k;
        proxy_connect_timeout 30;
        proxy_send_timeout 60;
        proxy_read_timeout 60;
        proxy_next_upstream error timeout invalid_header http_502;            
    }
}

Answer 3

生产环境只要不是用node做的web服务器, 都不需要用proxyTable

Answer 4

不需要配置生产环境