【Vue】本地使用 axios 调用第三方接口并处理跨域

在Vue项目中，你可以使用axios库来调用第三方API接口，并处理跨域问题。以下是一个简单的例子：

首先，确保你已经安装了axios。如果没有安装，可以通过npm或yarn进行安装：

npm install axios
# 或者
yarn add axios

然后，你可以在你的Vue组件中使用axios进行调用：

<template>
  <div>
    <button @click="fetchData">Fetch Data</button>
    <div v-if="data">
      Fetched Data: {{ data }}
    </div>
  </div>
</template>
 
<script>
import axios from 'axios';
 
export default {
  data() {
    return {
      data: null,
    };
  },
  methods: {
    async fetchData() {
      try {
        const response = await axios.get('https://api.example.com/data');
        this.data = response.data;
      } catch (error) {
        console.error('There was an error fetching the data:', error);
      }
    }
  }
};
</script>

对于跨域问题，如果你是在开发环境中遇到的，可以考虑使用代理来绕过跨域问题。在vue.config.js中配置devServer的proxy：

// vue.config.js
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'https://api.example.com',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
};

在上述配置中，当你访问/api时，请求会被代理到https://api.example.com。在组件中使用axios时，只需要将API的基础路径设置为/api即可。

// 在组件中
const response = await axios.get('/api/data');

如果你是在生产环境遇到跨域问题，那么你需要确保第三方API支持CORS（跨源资源共享），或者与API提供方协商正确的CORS策略。如果你没有权限修改服务器配置，那么使用代理是唯一的解决方案。