Vue Nginx反向代理配置 解决生产环境跨域

时间:2020-05-21
本文章向大家介绍Vue Nginx反向代理配置 解决生产环境跨域，主要包括Vue Nginx反向代理配置 解决生产环境跨域使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。

Vue本地代理举例：

module.exports = {

  publicPath: './',
  devServer: {
    proxy: {
      '/api': {
        target: 'https://movie.douban.com',
        ws: true,
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      },
      '/bpi': {
        target: 'https://cdnopenapialifc.agaege.com/',
        ws: true,
        changeOrigin: true,
        pathRewrite: {
          '^/bpi': ''
        }
      }
    }
  },
  pwa: {
    iconPaths: {
      favicon32: 'favicon.ico',
      favicon16: 'favicon.ico',
      appleTouchIcon: 'favicon.ico',
      maskIcon: 'favicon.ico',
      msTileImage: 'favicon.ico'
    }
  }
}
 
 
 
Vue 本地代理编辑好后，能实现跨域获取接口数据，但是打包后在生产环境接口报错404，要怎样才能解决生产环境跨域问题呢？
在开发环境配置好本地代理后，使用Nginx反向代理解决生产环境跨域问题！
 
　

1、修改Nginx的配置文件 xxx.conf

location /api {
   rewrite  ^.+api/?(.*)$ /$1 break; //可选参数，正则验证地址
   include  uwsgi_params; //可选参数，uwsgi是服务器和服务端应用程序的通信协议，规定了怎么把请求转发给应用程序和返回
   proxy_pass   https://www.xxxxx.cn:444; #此处修改为自己的请求地址，必填
}
###api为本地开发时，在config/index.js中的proxyTable: {}配置的请求代理
###根据具体情况修改
 
2、记得重启Nginx服务，使修改生效
　　　　　

原文地址：https://www.cnblogs.com/niuzijie/p/12928608.html

随机文章
Javascript知识点必读
最近更新