React/Redux 中的 Cloudinary“被 CORS 策略阻止”。 请求头域授权

Question

我的本地主机上的 CORS 有问题：

Access to XMLHttpRequest at 'https://api.cloudinary.com/v1_1/*******/image/upload' from origin 'https://localhost:3000' has been blocked by CORS policy: Request header field authorization is not allowed by Access-Control-Allow-Headers in preflight response.

我使用 react/redux。 下面是我添加/更改配置文件的 redux 操作。 当我使用http://localhost 时，此代码有效，但不适用于https 。 我在 server.js 中编写了 cors 中间件。 但它没有帮助。 我可以用它做什么？

export const addProfile = profile => {
  const formData = new FormData();
  formData.append("image", profile.avatar);
  formData.append("api_key", "********");
  formData.append("upload_preset", "********");
  formData.append("skipAuthorization", true);

  return (dispatch) => {
    axios.post('https://api.cloudinary.com/v1_1/********/image/upload',
      formData,
      { headers: { "X-Requested-With": "XMLHttpRequest" } })
      .then(res => {
        const image = res.data.secure_url;
        profile.avatar = image;
        axios
          .post("/api/profile", profile)
          .then(res => {
            console.log("res", res.data);
          })
          .catch(err =>
            console.log("err", err.response.data);
          );
      })
      .catch(err => console.log("cloundinary err =>", err))
  }
};

Answer 1

CORS 问题与您尝试访问的域有关： https : //api.cloudinary.com

他们/您需要将您的域添加到 api 响应标头 - 如果您需要从本地主机访问它，则可以使用通配符访问。 启用后，您应该能够在 api 响应中看到 CORS 标头。

请参阅此处了解更多信息： https : //en.wikipedia.org/wiki/Cross-origin_resource_sharing