vue 使用axios 出現跨域請求的兩種解決方法


最近在使用vue axios發送請求,結果出現跨域問題,網上查了好多,發現有好幾種結局方案。
1:服務器端設置跨域
header(“Access-Control-Allow-Origin:*”);
header(“Access-Control-Allow-Headers:content-type”);
header(“Access-Control-Request-Method:GET,POST”);


2:可以自己設置一個代理服務器,使用proxyTable 我比較推薦這種方法。
首先在config/index.js 里面找到proxyTable :{} ,然后在里面加入

 "/api":{
            target: 'http://47.104.218.122:8087',
            changeOrigin: true,
            pathRewrite: {
                '^/api': '/'
            }
        }

注意這里面 /api是你自定義的,寫成什么都可以。target 設置你調用的接口域名和端口號。這里理解成用‘^/api’代替target里面的地址,后面組件中我們調接口時直接用api代替 。比如我要調用’http://47.104.218.122:8087/dictionaryType‘,直接寫‘/api/dictionaryType’即可。
然后我們可以在main.js設置一個基礎路徑,這樣你調用接口的時候可以不寫api,直接寫/接口名稱即可。在main.js 設置 axios.defaults.baseURL = ”/api”;
然后掉接口的時候可以直接寫let  _url4 = ”/dictionaryTypes”;這樣就比較省事。

    this.$axios.get(_url4)
                    .then(response=>{
                        alert(response);
                        alert(1);
                    })
                    .catch(error=>{
                        console.log(error);
                    })

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM