Vue 跨域問題解決辦法 Vue 配置防止跨域 nginx 重定向防止跨域

前後端分離不可避免會遇到跨域問題，可把我煩的想砍人，現在總結幾個解決辦法讓後人不走歪路

環境：
Vue-cli 4x

本地開發跨域問題 - 配置devServer

1. 開啟根目錄的vue.config.js(沒有則建立，vue以前的版本有的是寫在config/index.js，有的寫在webpack.config.js，4x版本統一在vue.config.js)，寫入：

   module.exports = {
    devServer:{
    host: 'localhost', // Vue開發專案啟動域名
      port: 8080, // 埠
      https: false, // 是否是https
      open:false,
      proxy:{
            '/apiDev':{
                target: 'http://api.zmxy.com', // 後端API
                  changeOrigin: true,
                  pathRewrite:{
                        '^/apiDev':'' // 以apiDev作為字首
                  }
            }
        }
    }
   }

2. npm run serve 重新編譯專案，以apiDev開頭的URL就會自動轉發到api.zmxy.com
   axios使用：

   this.axios.
    get('/apiDev/index/index/getDetail',{
        params: {id:id}
    })

1. 編輯Nginx配置檔案

   location /api {
   rewrite  ^.+api/?(.*)$ /$1 break; //可選引數，正則驗證地址
   include  uwsgi_params; //可選引數，uwsgi是伺服器和服務端應用程式的通訊協議，規定了怎麼把請求轉發給應用程式和返回
   proxy_pass   https://www.api.com; // 此處修改為自己的請求地址，必填
   }

2. 重啟Nginx
   axios使用：

   this.axios.
    get('/api/index/index/getDetail',{
        params: {id:id}
    })

本作品採用《CC 協議》，轉載必須註明作者和本文連結