请求的资源上不存在“Access-Control-Allow-Origin”标头。节点快速获取

Posted 2023-03-04

【中文标题】请求的资源上不存在“Access-Control-Allow-Origin”标头。节点快速获取

【英文标题】：No 'Access-Control-Allow-Origin' header is present on the requested resource. Node Express Fetch

【发布时间】：2021-04-04 04:19:04

【问题描述】：

我知道很多人都遇到了非常相似的问题，但对他们有用的修复对我没有任何帮助。无论我做什么，我都会得到：

Access to fetch at 'http://localhost:5000/api/places/comments/test' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

我正在使用带有 express 的节点，这是我的 app.js 文件（与 CORS 相关的部分）：

const app = express();
app.use(bodyParser.json());
app.use((req, res, next) => 
  res.setHeader("Access-Control-Allow-Origin", "*");
  res.setHeader(
    "Access-Control-Allow-Headers",
    "Origin, X-Requested-With, Content-Type, Accept, Authorization"
  );
  res.setHeader(
    "Access-Control-Allow-Methods",
    "GET, POST, PATCH, DELETE, PUT"
  );
  next();
);
app.use("/api/places", placesRouter);

然后是路由文件（与不工作的路由相关）

placesRouter.post("/comments/test", requireLogin, addComment);

最后是处理程序：

  const addCommentHandler = async () => 
    try 
      const response = await fetch(
        `$process.env.REACT_APP_BACKEND_URL/api/places/comments/test`,
        
          method: "POST",
          body:  comment: formState.inputs.comment.value ,
          headers: 
            Authorization: `Bearer $auth.token`,
            "Content-Type": "application/json",
          ,
        
      );
      const responseData = await response.json();
      console.log(responseData);
     catch (e) 
  ;

我知道 body 已发送，并且我也在 Postman 中尝试过，它可以工作。

我在这里做错了什么？

【问题讨论】：

当您尝试使用 npm cors 包 npmjs.com/package/cors 来启用 CORS 时会发生什么情况？

@sideshowbarker 结果相同，完全没有变化

developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/… 看看这个可能是因为某些浏览器扩展

【参考方案1】：

您正在使用res.setHeader() 而不是req.setHeader()！

const app = express();
app.use((req, res, next) => 
  req.setHeader("Access-Control-Allow-Origin", "*");
  req.setHeader(
    "Access-Control-Allow-Headers",
    "Origin, X-Requested-With, Content-Type, Accept, Authorization"
  );
  req.setHeader(
    "Access-Control-Allow-Methods",
    "GET, POST, PATCH, DELETE, PUT"
  );
  next();
);
app.use(bodyParser.json());
app.use("/api/places", placesRouter);

【讨论】：

将 res 更改为 req 并没有帮助

您应该将其移至第一个中间件，将在 1 分钟内编辑我的答案