使用 CORS 和 Axios 进行跨域请求

如果你正在尝试从你的网站与一个不同域名的 API 进行交互，你可能会遇到 跨域请求 的限制。在这种情况下，你需要通过“CORS”（跨域资源共享）机制来解决问题。同时，如果你使用 JavaScript 进行 HTTP 请求的话，Axios 是一个非常好的工具库。

什么是 CORS？

CORS 是一种机制，它使用附加的 HTTP 头部来告诉浏览器是否允许一个 web 应用程序与一个不同域的服务器获取资源。

在具体实现方面，当一个跨域请求被发起时，浏览器会向外发送一个 OPTIONS 请求告诉服务器，它自己要进行一个 CORS 请求，接下来它将根据返回来的响应头进行决策。

实践

Axios 是一个基于 Promise 的 HTTP 客户端，可以更方便地进行跨域请求。在使用之前，需要配置 axios 实例的 baseURL。

import axios from 'axios';

const instance = axios.create({
  baseURL: 'https://xxxxxxx.com/api/v1', // 需要你自己填上合法的 API 域名
  headers: {
    'Content-Type': 'application/json',
    'Access-Control-Allow-Origin': '*'
  }
});

在配置了 axios 实例之后，可以使用以下方法对 API 进行请求：

instance.get('/user/12345')
  .then(response => console.log(response))
  .catch(error => console.log(error));

如果你需要为请求设置额外的请求头，可以直接在请求的参数中设置 headers：

instance.get('/user/12345', {
  headers: {
    'Authorization': 'Bearer ' + token
  }
})

在开发模式下，你可能还需要启动跨域服务来模拟真实环境下的 CORS 请求。这可以使用一些带有 CORS 插件的 Web 服务器来完成。

总结

通过配置 axios 实例，可以轻松地处理跨域请求。同时，为了让服务提供商能够正确处理缺少的 CORS 头，需要根据服务提供商的文档添加相应的请求头。