vue前端代理+nginx解决跨域问题

最新推荐文章于 2023-09-18 14:05:44 发布

名称正在更新……

最新推荐文章于 2023-09-18 14:05:44 发布

阅读量354

点赞数

分类专栏： VUE php 文章标签：前端 vue.js javascript

本文链接：https://blog.csdn.net/qq_39418742/article/details/121338107

版权

php 同时被 2 个专栏收录

31 篇文章 0 订阅

订阅专栏

VUE

4 篇文章 0 订阅

订阅专栏

在vue.config.js中配置

module.exports = {
    devServer: {
      proxy:{
        '/api':{
            target:'http://xxx.com',
            secure:false,
            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;
}