剛在弄一個定位的組件 用的是 騰訊地圖的api
h5請求的時候總是會跨域
https://apis.map.qq.com/ws/geocoder/v1/?key=8888-88888-TXM4G-TWPCR-H3FA7-QMFLI&location=39.984154,116.307490&output=jsonp
記錄幾種解決跨域的問題
1、用vue-jsonp跨域
第一步 安裝
npm install vue-jsonp --save
第二步 在main.js中引用
import vueJsonp from 'vue-jsonp' Vue.use(vueJsonp)
第三步 在直接請求你要請求的接口
this.$jsonp(
"https://api.map.baidu.com/reverse_geocoding/v3/?ak=lgB5fqzTUODMGllXL0Wk88888888&location=0,0&output=json&callback=showLocation"
).then(res => {
console.log(res,'百度')
})
this.$jsonp(
"https://apis.map.qq.com/ws/geocoder/v1/?key=AAAA-AAAA-AAAAA-AAAA-AAAA-AAAA&location=0,0&output=jsonp"
).then(res => {
console.log(res,'騰訊地圖')
})
在這里 我報了BUG ：Uncaught TypeError: Cannot read property 'install' of undefined
處理方式1、卸載重裝 vue-jsonp
npm uninstall vue-jsonp --save
處理方式2、查看代碼是否符合邏輯（我的問題就是發生在這里）
2、配置代理1
（該方法僅做記錄 好像行不通）
配置uni-app 中 manifest.json->h5->devServe
manifest.json配置新增
"h5": {
"devServer": {
"port": 80,
"disableHostCheck": true,
"proxy": {
"/dpc": {
"target": "https://你的域名地址",
"changeOrigin": true,
"secure": false,
"pathRewrite":{"^/dpc":""}
}
}
}
}
http調用
AA() {
uni.request({
url: '/dpc',//你的接口名稱,
success: (res) => {
console.log(res.data.data === "true")
}
});
}
3、配置代理2
另一種解決方案
直接創建一個vue.config.js文件
// vue.config.js
module.exports = {
devServer: {
proxy: {
'/prefix/api/user/list': {
target: 'https://api-remote.xxxx.com',
pathRewrite: {
'^/prefix': ''
}
}
},
}
}
1的來源
uniapp 第三方地圖 騰訊地圖 百度地圖 H5端 跨域請求
執行vue-jsonp 插件時報錯 ：Cannot read property 'install' of undefined
vue中jsonp調用接口瀏覽器顯示 Cannot read property 'jsonp' of undefined
https://ask.dcloud.net.cn/question/110982
2和3的來源：