我正在嘗試使用 axios 進行發布請求，以從我的前端 React 應用程式將影像上傳到云端。我從下面的 axios 代碼中收到此錯誤：
http://localhost:3000 已被 CORS 策略阻止：在預檢回應中 Access-Control-Allow-Headers 不允許請求標頭欄位 x-access-token。
使用 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 請求使用 fetch 時，發布請求有效并且不會給我錯誤。任何人都知道為什么以及如何使用 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"
}
}
uj5u.com熱心網友回復：
要創建與您的作業等效的 Axios 請求fetch()，您需要
制作一個
FormData實體并將其設定為請求data，以便您的內容型別為multipart/form-data確保您沒有使用先前創建的帶有不需要的默認標頭的Axios 實體
如果在默認的 Axios 實體上設定了自定義標頭，例如
axios.defaults.headers.common["x-access-token"] = TOKEN您可能需要覆寫/洗掉它們
transformRequest為了避免在默認 Axios 實體上定義任何攔截器，請為未攔截的請求創建一個新的單獨實體
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 實體（或多個實體）以避免亂用默認值。
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/414875.html
標籤：