クロスオリジン・リクエスト、reactjs、急行組み合わせ

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) 

Iは、ノードJSの上に明示してReactjsを使用。ここでは、Agoraサーバーからライブストリームビデオを再生しようとしましたが、再生中ではありません。コンソールで上記のエラーが表示されます。私はいくつかのCorsの広告を試してみましたが、それは完璧に働いています。 この問題は、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ウェブパックの設定には指定しないでください。

あなた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(); 
});