vue调用百度api时跨域问题的解决方案

在Vue中解决调用百度API时跨域问题，可以使用代理服务器来绕过浏览器的同源策略。以下是一个简单的解决方案：

1. 配置Vue CLI的vue.config.js文件，设置一个代理服务器。

// vue.config.js
module.exports = {
  devServer: {
    proxy: {
      '/baidu-api': {
        target: 'https://api.map.baidu.com', // 百度API的实际地址
        changeOrigin: true,
        pathRewrite: {
          '^/baidu-api': ''
        }
      }
    }
  }
}

2. 在Vue组件中，使用配置好的代理来调用百度API。

// Vue组件中
export default {
  // ...
  methods: {
    async fetchBaiduData() {
      try {
        const response = await this.$http.get('/baidu-api/place/v2/search?query=景点&region=北京&output=json&ak=您的百度AK');
        console.log(response.data);
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    }
  }
}

在上述代码中，this.$http是axios实例，用于发送HTTP请求。你需要确保在项目中安装并配置了axios。

请注意，你需要替换ak参数为你自己的百度地图API Key。

这样配置后，所有通过/baidu-api发出的请求都会被代理到百度API服务器，并且会绕过同源策略，从而解决跨域问题。