Vue ajax跨域請求

Vue webpack-dev-server實現跨域請求

思路

配置webpack-dev-server，代理某一個路徑到目標路徑，同是更改源和重寫

Vue里定義一個全部變量：site
Vue.prototype.site = '/api/';
此后發送的ajax請求都使用此變量來組合（為了方便管理，當需要更改時直接更改次變量）

設置webpack的代理和重寫
在 config/index.js里修改dev選項

 dev: {
    env: require('./dev.env'),
    port: 8080,
    autoOpenBrowser: true,
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/api':{
        target:'http://xxxx.com/api',
        changeOrigin:true,
        pathRewrite:{
            '^/api':''
        }
      }
    },

主要看proxyTable選項：
/api 是要代理的目錄，target 是目標URL，即后台接口的真正位置
changeOrigin 為是否修改源，當時用ajax且跨域測試時需為true
pathRewrite 為路由重定向

工作流程：
當檢測到有URL請求且是/api 路徑時就修改請求URL，把請求URL中的/api 替換為target里的值，同時改變源讓瀏覽器認為不是跨域請求
example: 我發送一個ajax請求，路徑為 /api/test.php ，那修改后真實請求的url就是 http://xxxx.com/api/test.php

注意 因為部署到服務器上時不再使用webpack，所以你需要修改ajax請求的url，當你使用之前說的全局變量時只需要修改下全局變量就好
，更好的實踐是根據部署代碼的位置和后台api的未知來設置需要代理的路徑
假如部署的前端代碼index.html在根目錄下，后台api在/test/下，那么把代理路徑設置為/test更勝一籌