vue设置反代

生产环境下

我自己在做一个后台项目时遇到跨域的问题,前端项目运行端口为localhost:8080,后端项目运行端口为localhost:3000,前端向后台发起数据请求时报错,解决方法就是配置vue的反向代理

  • 在项目目录中有一个config目录,打开里面的index.js文件
  • 添加代码
    proxyTable: {
    '/api/**': {
    target: 'http://www.xxxx.com:3000',
    changeOrigin: true,
    emulateJSON: true,
    pathRewrite: {
    '^/api': ' '
    }
    }
    }

    vue设置反代
  • 这里的host因为我是测试环境,所以把host的值改成了项目的域名,
  • api代替了其中的后台项目地址
  • 里面的target值为后台项目的地址
测试环境

修改系统hosts文件,把127.0.0.1指向到你项目的域名
编辑nginx.conf,修改localhost以及端口参数,指向后台项目地址
把localhost改为域名即可,
大致可参照生产环境进行配置