vue项目使用proxy代理解决跨域及nginx配置

在vue.config.js中配置

proxy: {
    '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        pathRewrite: {
            '^/api': ''
        }
    }
}

  target：接口域名；

 changeOrigin： 如果设置为true,那么本地会虚拟一个服务端接收你的请求并代你发送该请求；

 pathRewrite：如果接口中是没有api的，那就直接置空（如上）。如果接口中有api，就需要写成{‘^/api’:‘/api’}

 

注意：

   proxy只是解决了开发环境的跨域，线上依然会产生跨域的问题。上线时需要配置nginx！

   

  另，nginx配置如下：

location /api/ {
    proxy_next_upstream http_500 http_502 http_503 http_504 error timeout invalid_header;
    proxy_set_header Host $host;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_pass http://127.0.0.1:8001;  #机器ip
    expires 0;
}
location ^~/SaaSPortal {
    alias /export/App/epp_saas_m_portal/SaaSPortal;
    try_files $uri $uri/ /SaaSPortal/index.html;
}