vue3 axios 第三方接口跨域

Vue3中使用axios跨域访问第三方接口

在Vue3项目中，我们经常需要使用axios来发送HTTP请求与后端交互，但有时我们也需要访问第三方接口，而这些接口可能存在跨域的问题。在这篇文章中，我们将介绍如何使用axios在Vue3项目中访问第三方接口时处理跨域问题。

什么是跨域

跨域是指浏览器有同源策略，不允许AJAX请求发送到一个不同源的地址。不同源的定义是协议，域名，端口号有一个不同即为不同源。而第三方接口往往是不同源的，所以会存在跨域问题。

解决跨域问题

解决跨域问题有多种方式，其中一种是在后端进行跨域配置，但如果我们无法修改第三方接口的后端配置，我们可以在前端通过代理服务器或者使用axios的配置项来解决跨域问题。

通过代理服务器解决跨域

通过配置vue.config.js文件来设置代理服务器，将请求转发到第三方接口，并在axios中访问代理服务器地址即可解决跨域问题。

// vue.config.js

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: '
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

<!-- 使用axios访问第三方接口 -->

<script>
import axios from 'axios';

axios.get('/api/users')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });
</script>

通过axios配置解决跨域

另一种方式是通过axios的配置项来解决跨域问题，设置withCredentials为true，crossDomain为true，并且在请求头中添加Origin字段。

// axios配置

axios.defaults.withCredentials = true;
axios.defaults.crossDomain = true;
axios.defaults.headers.common['Origin'] = 'http://localhost:8080';

<!-- 使用axios访问第三方接口 -->

<script>
import axios from 'axios';

axios.get(' {
  headers: {
    'Content-Type': 'application/json',
    'Accept': 'application/json',
    'X-Requested-With': 'XMLHttpRequest'
  }
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });
</script>

总结

在Vue3项目中使用axios访问第三方接口时可能会遇到跨域问题，通过配置代理服务器或者axios的相关配置项可以解决这个问题。选择合适的解决方案可以让我们更便捷地与第三方接口进行交互，提升开发效率。

希望本文对你有所帮助，如果有任何疑问欢迎留言讨论。