VUE里面調用高德地圖出現跨域和Access to XMLHttpRequest at 'https://restapi.amap.com/v3/geocode/regeo?xx' from origin 'http://xxxx:8080' has been blocked by CORS policy: The value of the 'Access-Contr

VUE里面調用高德地圖獲取經緯度和地址API  'https://restapi.amap.com/v3/geocode/regeo'

 

未解決前代碼

this.$axios.get("https://restapi.amap.com/v3/geocode//regeo", {
　　params: {
　　　　location: lng + "," + lon,
　　　　key: "key值"
　　}
}).then(json => {
　　console.log(json);
});

 

點擊地圖獲取經緯度和地址的時候報跨域問題：如圖

 

一番百度折騰，有說請求頭的問題，有jsonp請求頭帶changeOrigin: true等等。

最終解決的是請求頭帶changeOrigin: true；

那么怎么處理呢；？

一、先在vue的vue.config.js配置文件里面加代理

'/amap': {
　　target: 'https://restapi.amap.com/v3/geocode/',
　　　　changeOrigin: true,
　　　　ws: true,
　　　　pathRewrite: {
                    '^/amap': ''
　　}
},

　　

二、在請求的頁面代碼：

this.$axios.get("/amap/regeo", {
　　params: {
　　　　location: lng + "," + lon,
　　　　key: "key值"
　　}
}).then(json => {
　　console.log(json);
});

　　

 

就這樣，完美解決·~~