Question

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

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)

我在节点js上使用了带有express的Reactjs。在这里，我试图播放从Agora服务器的直播视频，它没有播放。当我检查控制台显示上述错误。我尝试了一些Cors ad-dons到chrome，它工作得很完美。我们如何通过直接在express-react env中添加这个头来解决这个问题？

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

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/');
});

但它仍无效。

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

Answer 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();
});

Answer 2

使用Firefox我遇到了错误：

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

因此，尽管这行不通：

\d4

解决该问题所需的全部工作就是将地址更改为“ http：// localhost：3000”，如下所示：

(\d4)

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

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

跨节点请求在节点，reactjs，express组合中被阻塞

2 个答案: