• 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服务,使修改生效

    举例:

    location /api {
    rewrite ^.+api/?(.*)$ /$1 break;
    include uwsgi_params;
    proxy_pass https://movie.douban.com;
    }
    
    location /bpi {
    rewrite ^.+bpi/?(.*)$ /$1 break;
    include uwsgi_params;
    proxy_pass https://cdnopenapialifc.agaege.com/;
    }
    

      

  • 相关阅读:
    Python 一条语句如何在多行显示的问题
    代理模式
    MySQL workbench中的PK,NN,UQ,BIN,UN,ZF,AI说明
    异步加载 Echarts图的数据
    Web页面中两个listbox的option的转移
    半透明效果
    在地图上使图片透明
    加载图片方式
    获取鼠标坐标
    画笔与画刷
  • 原文地址:https://www.cnblogs.com/zhaohongcheng/p/11250161.html
Copyright © 2020-2023  润新知