Axios post 被 CORS 阻止。使用 CLoudinary api

Question

我正在尝试使用 axios 执行 post 请求，以将图像从我的前端 React 应用程序上传到 cloudinary。我从下面的 axios 代码中得到这个错误：

http://localhost:3000 has been blocked by CORS policy: Request header field x-access-token is not allowed by Access-Control-Allow-Headers in preflight response.

使用 axios，不起作用给我 cors 错误

await axios({
  method: "POST",
  url: "https://api.cloudinary.com/v1_1/******/image/upload/",
  data: {
    file: img,
    upload_preset: "*****",
    cloud_name: "****",
  },
})
  .then((res) => {
    console.log("response");
    console.log(res);
  })
  .catch((err) => console.log(err));

同时，当我使用相同的 api 请求进行提取时，post 请求有效并且没有给我错误。有人知道为什么以及如何使用 axios 调用 api 吗？

  const data = new FormData();
        data.append("file", img);
        data.append("upload_preset", "*****");
        data.append("cloud_name", "*****");


  await fetch(
           "  https://api.cloudinary.com/v1_1/****/image/upload/",
           {
             method: "post",
             body: data,
           }
         )
           .then((resp) => resp.json())
           .then((data) => {
             setUrlArray((prevState) => [...prevState, data.url]);
           })
           .catch((err) => console.log(err));

额外信息：我的上传预设未签名。
在进行 axios api 调用后也从控制台得到了这个

{
error: {
message: "Upload preset must be specified when using unsigned upload"
}
}

Answer 1

要创建等同于您的工作 fetch() 请求的 Axios 请求，您需要

创建一个 FormData 实例并将其设置为请求 data 这样您的 content-type 就是 multipart/form-data
确保您没有使用以前 created Axios instance 不需要的默认值 headers
如果在默认的axios实例上设置了自定义headers，例如
```
axios.defaults.headers.common["x-access-token"] = TOKEN
```
您可能需要 override / delete them in transformRequest
为避免在默认 Axios 实例上定义任何拦截器，为 un-intercepted 请求创建一个新的单独实例

import axios from "axios" // import the default instance

// create a new instance without interceptors. 
// you could also create this in its own module and import from there
const instance = axios.create()

const data = new FormData()
data.append("file", img);
data.append("upload_preset", "*****");
data.append("cloud_name", "*****");

const res = await instance.post(
  "https://api.cloudinary.com/v1_1/******/image/upload/", 
  data
)

理想情况下，如果您的应用要自定义请求，您应该始终使用一个 Axios 实例（或多个实例）以避免乱用默认值。

Axios post 被 CORS 阻止。使用 CLoudinary api

Axios post blocked by CORS. Using CLoudinary api

reactjs

axios

cors

fetch

cloudinary