vue proxyTable 解決本地環境跨域

在localhost環境下跑項目時，接口地址是 http://xxxx.com/cyryysl/mobileApplyStep1Save.action 這樣的接口地址，我們這樣直接使用會存在跨域的請求，導致接口請求不成功，我們進入 config/index.js 代碼下如下配置即可。

// 代理配置表，在這裏可以配置特定的請求代理到對應的API接口
    // 例如將'localhost:8080/api/xxx'代理到'www.example.com/api/xxx'
    // 使用方法：https://vuejs-templates.github.io/webpack/proxy.html
 proxyTable: {
      '/cyryysl': {
        target: 'http://192.168.170.41:8082/cyryysl', // 接口的域名
        // secure: false,  // 如果是https接口，需要配置這個參數
        changeOrigin: true, // 如果接口跨域，需要進行這個參數配置
        pathRewrite: {
          '^/cyryysl': ''
        }
      }
    },

 

main.js裏面這樣寫

接口地址原本是 /cyryysl/xxx.action，但是爲了匹配代理地址，在前面加一個 /cyryysl,  因此接口地址需要寫成這樣的即可生效 /cyryysl/xxx.action。

注意： '/cyryysl' 爲匹配項，target 爲被請求的地址，因爲在 ajax 的 url 中加了前綴 '/cyryysl'，而原本的接口是沒有這個前綴的，所以需要通過 pathRewrite 來重寫地址，將前綴 '/cyryysl' 轉爲 '/'。如果本身的接口地址就有 '/cyryysl' 這種通用前綴，就可以把 pathRewrite 刪掉。

自己的理解：這個配置只是對本地環境的配置，和打包後的線上環境是沒關係的，如果線上的前後端代碼不在同一域名下，那就要通過其他方式來解決了，我們公司目前用的nginx代理