我该如何解决：在预检响应中 Access-Control-Allow-Headers 不允许请求标头字段 x-access-token？

Posted 2023-03-25

【中文标题】我该如何解决：在预检响应中 Access-Control-Allow-Headers 不允许请求标头字段 x-access-token？

【英文标题】：How can I fix : Request header field x-access-token is not allowed by Access-Control-Allow-Headers in preflight response?

【发布时间】：2021-12-12 01:38:38

【问题描述】：

我正在尝试从我的本地地址 (localhost:3000) 将图像上传到 Cloudinary。但是，当我尝试将图像上传到它时，它给了我这个错误： CORS 策略已阻止从源“http://localhost:3000”访问“https://api.cloudinary.com/v1_1/dz8xmxmly/image/upload”处的 XMLHttpRequest：请求标头字段 x-access Access-Control-Allow-Headers 在预检响应中不允许使用 -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)
.then((response) => 
  console.log(response.data.url);
)
return (
<>
<input  type="file" onChange = uploadImage />
</>
 );
 ;
 export default Input;

【参考方案1】：

我在编写第一个应用程序时遇到了同样的问题。 CORS - 跨访问资源共享 当您尝试从其他域获取/放入数据时适用。

预检请求 - 请求哪个浏览器在后端服务器上代表您检查您是否有资格/被授权进行 CRUD 操作（用于放置、删除、发布）请求。

在后端Cloudinary 仅允许具有某些标头的请求，而这些标头在您的发布请求中不存在 例如，Cloudinary 不允许您尝试发送的 x-access-token。

但我不确定您在 axios 中究竟从哪里设置标头。

您可以将代码更改为以下内容

    axios.post("https://api.cloudinary.com/v1_1/dz8xmxmly/image/upload",formdata,
    headers:
       //read cloudinary documentation and write approproate headers here 
    
    )
    .then((res)=>
       //do something
    )
    .catch((err)=>
      //do somehting
    )

Please refer to this post 了解更多信息。

【讨论】：

我没有在我的代码中添加任何标题。我可以在标题中包含什么？我试图阅读他们的文档，但没有帮助。

here 您可以找到 cloudinary 的 api 文档，其中包含所需的所有信息。谢谢 :)