vue跨域问题

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解决跨域

1. 安装

   npm i vue-jsonp

2. 在main.js中引入, 引入后在vue的原型对象上多了一个 $jsonp的方法

   import { VueJsonp } from 'vue-jsonp'
   Vue.use(VueJsonp)

3. 页面中使用,参数一定要加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 })
       },