使用Axios调用API时遇CORS预检失败问题求助

嘿，看了你的错误信息和代码，核心问题确实是CORS预检请求失败，而且你代码里有个典型的新手误区——你把CORS相关的响应头（比如Access-Control-Allow-Origin）加到了前端的请求头里，这完全搞反了！这些头是服务器需要返回给浏览器的，不是前端请求时要带的。

第一步：先修正代码里的错误请求头 #

把你Axios请求里那些多余的CORS头删掉，它们在这里不仅没用，还可能干扰浏览器的预检逻辑。只保留你真正需要的请求头就行：

export const getMetadata = srNumber => {
  return (dispatch) => {
    dispatch(getMetadataRequest())
    axios.get(`${BASE_URL}/some path/${srNumber}`, {
      headers: {
        // 只保留业务需要的JWT头
        'X-JWT-Assertion': ASSERTION
      }
    })
    .then(response => {
      const data = response.data
      console.log("GET METADATA", data)
      // 顺便提一句：这里有个拼写错误，getMetedataSuccess → getMetadataSuccess
      dispatch(getMetadataSuccess(data))
    })
    .catch(error => {
      const errorMessage = error.message
      console.error("GET METADATA", errorMessage)
      dispatch(getMetadataFailure(errorMessage))
    })
  }
}

另外注意代码里的拼写错误（getMetedataSuccess少了个a），虽然这和CORS无关，但可能导致后续状态更新失败，顺手改了吧。

第二步：解决CORS预检失败的核心方案 #

CORS预检请求（也就是浏览器自动发的OPTIONS请求）失败，本质是目标API服务器没有正确配置CORS规则，不允许你的前端域名跨域访问。你有两个可行的解决方向：

方向一：让API服务器配置正确的CORS响应头 #

联系负责维护这个API的开发者，让他们在服务器端配置以下响应头（针对OPTIONS预检请求和实际请求）：

• Access-Control-Allow-Origin: 设置为你的前端域名（比如https://your-frontend-app.com），如果不需要带凭证（比如cookie），也可以设为*（但不推荐生产环境用*）
• Access-Control-Allow-Methods: 必须包含GET（以及你后续可能用到的其他HTTP方法）
• Access-Control-Allow-Headers: 必须包含你请求里带的X-JWT-Assertion，还有Content-Type等必要的请求头
• 如果你的请求需要带凭证，还要额外返回Access-Control-Allow-Credentials: true，同时Access-Control-Allow-Origin不能设为*，必须是具体的前端域名

方向二：开发环境用代理绕过CORS检查 #

如果暂时没法修改服务器配置，可以在本地开发时用代理转发请求，这样浏览器会认为请求是同源的，就不会触发CORS检查了：

• 如果你用的是Create React App，直接在package.json里加一行"proxy": "https://your-api-base-url.com"，然后把Axios请求里的BASE_URL换成相对路径（比如/some path/${srNumber}）
• 或者用http-proxy-middleware这类工具自定义代理规则，适配你的项目结构

为什么会出现第二个错误？ #

你说得完全对！第二个CORS request did not succeed错误是浏览器的连锁反应——因为预检请求失败了，浏览器直接终止了后续的实际GET请求，所以才会抛出这个错误。只要解决了预检请求的问题，第二个错误自然就消失了。

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