利用nginx反向代理解决vue-cli项目打包后代理接口报404错误的问题

责编:menVScode 2019-02-20 11:55 阅读(1894)

vue-cli 跨域设置

proxyTable: {
  '/api': {
      target: 'http://47.96.198.193:8080/bigstudent',
      changeOrigin: true,
      pathRewrite: {
        '^/api': ''
      }
  },
}

打包好的项目是用nginx来跑的,linux 安装 nginx 可查看本篇文章:http://menvscode.com/detail/5c3d4ad44ac443095e53a4f5

部署到线上后,发现接口都报404了。

解决方案如下:

找到nginx安装目录,在 nginx.conf 配置文件中添加:

location /api {
    proxy_set_header   Host             $host;
    proxy_set_header   x-forwarded-for  $remote_addr;
    proxy_set_header   X-Real-IP        $remote_addr;
    proxy_pass http://XXX.XX.XX.XXX:XXXX; // 接口地址
} 

如上配置后,重新启动 nginx:

/home/nginx/sbin/nginx -s reload
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码