React中使用Axios请求API遭CORS拦截问题求助

问题详情 #

在本地http://localhost:3000运行的React项目中，使用Axios调用第三方API时遇到CORS错误：

从'http://localhost:3000'发起的XMLHttpRequest请求访问'https://URL'时被CORS策略阻止，预请求响应未通过访问控制检查，请求资源不存在'Access-Control-Allow-Origin'头。

补充测试情况：

• 用curl或直接发送HTTP请求到该API，能正常获取数据
• 开启Chrome的CORS扩展后，前端请求可正常执行，但项目不允许使用这类扩展

解决代码 #

通过配置Axios请求参数解决了该问题，具体代码如下：

React组件实现 #

import axios from "axios"

export function App() {
  const config = {
    headers: { Authorization: `Bearer TOKEN` },
    "Access-Control-Allow-Origin": "*",
    "Access-Control-Allow-Methods": "GET",
    'Access-Control-Allow-Headers': '*',
    "Access-Control-Allow-Credentials":  "true",
    "Access-Control-Expose-Headers": "*",
    "Accept": "application/json",
    "Content-Type": "application/json",
    "Origin": "*",
  };

  axios.get(
    "https://URL",
    config
  )
    .then(console.log)
    .catch(console.log);
}

页面依赖脚本 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

内容的提问来源于stack exchange，提问作者Ewaastw