Nodejs React CORS 策略：请求的资源上不存在“Access-Control-Allow-Origin”标头

Posted 2023-03-04

【中文标题】Nodejs React CORS 策略：请求的资源上不存在“Access-Control-Allow-Origin”标头

【英文标题】：Nodejs React CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource

【发布时间】：2021-08-29 22:43:39

【问题描述】：

我遇到了这个错误：

从源“http://localhost:8081”访问“http://localhost:3000/api/users/uploadAvatar”的 XMLHttpRequest 已被 CORS 策略阻止：没有“访问控制允许源”请求的资源上存在标头。

当我的服务器 cors 选项是：

app.use((req, res, next) => 
  res.header("Access-Control-Allow-Origin", "http://localhost:8081");
  res.header("Access-Control-Allow-Credentials", "true");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Authorization");
  if (req.method === 'OPTIONS') 
      res.header("Access-Control-Allow-Methods", "PUT, POST, DELETE, GET");
      return res.status(200).json();
   
  next();
);

从前端我用这个选项调用服务器：

var data = 
      image: imageCrop.current.getImage().toDataURL(),
      target: targetImage,
    
    var config = 
      onUploadProgress: function (progressEvent) 
        var percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total)
        setUploadPercent(percentCompleted)
      ,
      headers: authHeader(),
      withCredentials: true,
    
    axios.post('uploadAvatar', data ,config).then((res) => 
      setUploadPercent(0);
      if (res.status === 200) 
        cogoToast.success("upload is completed")
        setUploadModal(false);
        upDateuserInfo();
      
    ).catch((err) => 
      setUploadPercent(0);
      setUploadModal(false);
    );

Auth 标头服务提供有：

export default function authHeader() 
  const user = JSON.parse(localStorage.getItem("user"));

  if (user && user.accessToken) 
    // For Spring Boot back-end
    // return  Authorization: "Bearer " + user.accessToken ;
    // for Node.js Express back-end
    return  Authorization: "Bearer " + user.accessToken;
   else 
    return ;
  

我做错了什么？？请帮我！！！ p.s.如果我删除图像参数并且我无法设置“Access-Control-Allow-Origin”，“*”，则调用正常，因为它会给我使用通配符的错误。

【问题讨论】：

出于安全原因，前端网页不允许向来自它们的服务器以外的服务器发出请求。这称为 CORS。据我了解，您是从 localhost:8081 提供的前端页面向 localhost:3000 （根据您的浏览器是两个独立的服务器）发出请求，所以这发挥了作用。你应该做的是从你的前端向它的后端在 localhost:8081 发出请求，然后让 localhost:8081 的后端向 localhost:3000 发出请求。

@fin444 感谢您的回复，但是如何使用 React 将来自后端 localhost:8081 的调用转发到 localhost:3000？

你能把你的项目上传到 Github 之类的地方并链接吗？我无法完全理解您的客户端和服务器如何交互。

感谢@fin444 的建议，我已经在 React 端放置了一个代理！非常感谢

【参考方案1】：

我已经解决了将这一行放在 package.json 中：

"proxy": "http://localhost:3000/api/"