Vue如何在webpack設置代理解決跨域問題

        在開發過程當中咱們請求數據有時候調用的是第三方接口，此時便會遇到一個問題：跨域限制。對於跨域問題的解釋就不詳細敘述了，要了解的請自行百度。通常跨域問題控制檯會報這個錯：

        不少狀況下後臺會給咱們作請求代理，當後臺沒有幫你的時候只能本身解決了，Vue-cli這裏我用的是webpack，那麼咱們須要在webpack上作代理設置，具體步驟以下：

        假設請求地址爲http://baidu.com/img/upload/file。

        1.在config/index.js文件的dev: {   proxyTable: { }}寫入要跨域代理的連接地址，以下圖所示：

                   

         注意： '/upload'爲匹配項，咱們匹配項寫'/upload'，那麼當咱們npm run dev把本地服務跑起來後localhost:8080/upload/file就是咱們的代理地址了。

                target參數填寫被請求的地址，好比第三方接口，好比上面的http://baidu.com/img/upload/file；

                changeOrigin參數是若是接口跨域須要配置這個參數；

                pathRewrite參數是重寫地址；

                還有一個參數secure，若是是https接口須要配置這個參數；

 

        2.在config/dev.env.js文件中配置，以下圖所示：

                                     

 

        3.在config/prod.env.js文件中配置，以下圖所示：

        注意：在此處的upload填寫'"//baidu.com/img/upload/"'，不須要寫'http:'，在最後切記要加上'/'；

 

        此時webpack的代理配置已經完成，須要重啓服務，而後寫請求函數就能夠了，我使用的是axios搭配qs，因此請求函數爲：

        export const uploadFile = params => { return axios.post('/upload/file', qs.stringify(params)).then(res => res.data)}；

        請求函數各自寫的不同，在此只是想表達請求函數第一個參數url要寫'/upload/file'，這樣至關於請求http://baidu.com/img/upload/file。至此跨域問題已經解決，親測有效。

 

 

 

          如需轉載請註明出處： http://www.cnblogs.com/zishang91/p/8909900.html，以便有錯誤能夠及時修改，如有錯漏不足之處，請見諒而且指點，謝謝！！！