如何解决预检响应中Access-Control-Allow-Headers不允许x-access-token请求头的问题

问题原因 #

你项目中axios的全局配置/请求拦截器默认给所有接口请求都附加了x-access-token自定义请求头，而Cloudinary公开上传接口的CORS规则未放行该请求头，因此预检请求校验失败触发跨域报错。

解决方案 #

方案1：单独为上传请求清空多余请求头 #

在调用axios发起上传请求时，新增第三个配置参数，手动清除x-access-token头即可，修改后的完整代码如下：

import React from "react";
import axios from "axios";
const Input = (props) => {
  const uploadImage = (event) => {
    const file = event.target.files[0];
    const formData = new FormData();
    formData.append("file", file);
    formData.append("upload_preset", "lwop0fgy");
    axios.post(
      "https://api.cloudinary.com/v1_1/dz8xmxmly/image/upload",
      formData,
      {
        headers: {
          "x-access-token": undefined
        }
      }
    ).then((response) => {
      console.log(response.data.url);
    })
  }
  return (
    <>
      <input type="file" onChange={uploadImage} />
    </>
  );
};
export default Input;

方案2：在请求拦截器中做规则判断 #

如果你的项目是通过全局请求拦截器统一注入token，可以修改拦截器逻辑，避免给Cloudinary域名的请求附加x-access-token头：

// axios全局请求拦截器修改示例
axios.interceptors.request.use(
  config => {
    // 仅非Cloudinary请求附加token
    if (!config.url.includes('api.cloudinary.com')) {
      const token = localStorage.getItem('your_token_key') // 替换为你实际的token获取逻辑
      if (token) {
        config.headers['x-access-token'] = token
      }
    }
    return config
  },
  error => Promise.reject(error)
)

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