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

胡萝北
  • 243

image.png

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


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

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

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

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

回复
阅读 1.1k
4 个回答
 proxy: {
    '/ftwcm/': {
      target: process.env.BASE_URL, // 目标接口域名
      changeOrigin: true, // 是否跨域
      // pathRewrite: { '^/app/': '' }, // 把/app 替换成 /
    },
    '/v1/': {
      target: process.env.BASE_URL, // 目标接口域名
      changeOrigin: true, // 是否跨域
      // pathRewrite: { '^/app/': '' }, // 把/app 替换成 /
    },
  },

我是这么用的 你参考一下

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

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

不需要配置生产环境

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏