1.proxy代理解决跨域
export default defineConfig({
plugins: [
vue(),
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
})
],
server: {
// port: 4000, // 设置服务启动端口号
// open: true, // 设置服务启动时是否自动打开浏览器
// cors: true, // 允许跨域
// 设置代理,根据我们项目实际情况配置
proxy: {
'/api': { //apiTest是自行设置的请求前缀,按照这个来匹配请求,有这个字段的请求,就会进到代理来
target: 'http://xxxx', // 需要代理的域名
changeOrigin: true, // 是否跨域
rewrite: (path) => path.replace('/api', '') //重写匹配的字段,如果不需要放在请求路径上,可以重写为""
}
}
},
resolve: {
alias: {
// 实际转换
'@': fileURLToPath(new URL('./src', import.meta.url))
}
}
})
2.vue-jsonp解决跨域
- 安装
npm i vue-jsonp
- 在main.js中引入, 引入后在vue的原型对象上多了一个 $jsonp的方法
import { VueJsonp } from 'vue-jsonp'
Vue.use(VueJsonp)
- 页面中使用,参数一定要加output:'jsonp', 否则报错超时
// 地址逆解析
async getAddress(lat, lng) {
const obj = {
location: `${lat},${lng}`,
output: 'jsonp'
}
// const res = await getAddress(obj)
// vue-jsonp解决跨域
const res = await this.$jsonp('https://apis.map.qq.com/ws/geocoder/v1', obj)
this.$emit('sendAddress', { lat, lng, address: res.result.address })
},