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。以下是我用于添加/更改配置文件的还原操作。当我使用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

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

1 个答案: