node、reactjs、express组合中的跨域请求被阻止

Posted 2023-02-22

【中文标题】node、reactjs、express组合中的跨域请求被阻止

【英文标题】：Cross-Origin Request Blocked in node,reactjs,express combination

【发布时间】：2017-08-21 04:43:19

【问题描述】：

我厌倦了所有浏览器中的以下问题

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://vid-129002.hls.chinanetcenter.broadcastapp.agoraio.cn/live/pub421490684319281/playlist.m3u8. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing)

我在 node js 之上使用了带有 express 的 Reactjs。在这里，我尝试从 Agora 服务器播放实时流视频，但它没有播放。当我检查控制台时显示上述错误。我在 chrome 上尝试了一些 Cors 插件，它运行良好。 我们如何通过直接在 express-react 环境中添加此标头来解决此问题？

从一些教程中我添加了以下内容来解决它：

var config = 
entry: APP_DIR + '/index.jsx',
headers: 
    "Access-Control-Allow-Origin": "http://localhost:3000",
    "Access-Control-Allow-Credentials": "true",
    "Access-Control-Allow-Headers": "Content-Type, Authorization, x-id,   
    Content-Length, X-Requested-With",
    "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, OPTIONS"
,

我的 server.js 文件：

    var path = require('path');
    var webpack = require('webpack');
    var express = require('express');
    var config = require('./webpack.config');

     var app = express();
    var compiler = webpack(config);

    app.use(require('webpack-dev-middleware')(compiler, 
   publicPath: config.output.publicPath
   ));

  app.use(function(req, res, next) 
  res.header("Access-Control-Allow-Origin", "http://localhost:3000");
  res.header("Access-Control-Allow-Credentials", "true");
  res.header("Access-Control-Allow-Headers", "Origin,Content-Type,   Authorization, x-id, Content-Length, X-Requested-With");
  res.header("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
  next();
  );

  app.use(require('webpack-hot-middleware')(compiler));

  app.get('*', function(req, res) 
  res.sendFile(path.join(__dirname, 'index.html'));
  );

 app.listen(3000, function(err) 
  if (err) 
    return console.error(err);
 

  console.log('Listening at http://localhost:3000/');
);

但还是不行。

你能建议我解决这个问题吗？

【问题讨论】：

How to allow CORS?的可能重复

【参考方案1】：

您需要从 NodeJS 服务器发送以下标头，而不是在您的 ReactJS webpack 配置中指定这些标头。

将以下行添加到您的 NodeJs 服务器代码

app.use(function(req, res, next) 
    res.header("Access-Control-Allow-Origin", "http://localhost:3000");
    res.header("Access-Control-Allow-Credentials", "true");
    res.header("Access-Control-Allow-Headers", "Origin,Content-Type, Authorization, x-id, Content-Length, X-Requested-With");
    res.header("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
    next();
);

【讨论】：

我已经在我的项目根目录的 server.js 文件中尝试了相同的代码。但我没有工作。我是否以正确的方式进行操作？因为我是反应的新手，节点的东西。我刚刚在我的主要问题中添加了 server.js 代码。请看一下。

在您的代码中某处您试图在http://vid-129002.hls.chinanetcenter.broadcastapp.agoraio.cn/live/pub421490684319281/playlist.m3u8. 上执行 API 请求，我认为它没有启用 CORS，因此它不适合您。您需要在上述 API 服务器上设置 CORS 标头

vid-129002.hls.chinanetcenter.broadcastapp.agoraio.cn‌​/live/pub42149068431‌​9281/playlist.m3u8 . 这是 Agora 直播服务提供的测试 URL，用于测试来自我们 Web 应用程序的一些直播。我正在尝试通过我的网络应用程序中的 hls 播放器播放此直播。

您能否阅读获得此 API URL 的文档。因为我认为他们不会在他们的 API 上允许 CORS

问题是我设法从其他一些在线 hls 播放器以及我以前的一个 codeigniter 应用程序中播放 url。现在我们开始做出反应，在这里尝试做同样的事情。我向该服务发送了有关 cors 问题的邮件。

【参考方案2】：

使用 Firefox 我遇到了错误：

跨源请求被阻止：同源策略不允许读取位于 http://localhost:3001/xyz 的远程资源。 （原因：CORS 请求未成功）。

所以虽然这不起作用：

  res.header("Access-Control-Allow-Origin", "http://localhost:3000/");

修复它所需的只是将地址更改为“http://localhost:3000”，如下所示：

  res.header("Access-Control-Allow-Origin", "http://localhost:3000");

另外，我发现它的方法是使用 MDN 网络文档的“CORS 错误”页面：

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors