Cross-Origin Request Blocked in node,reactjs,express combination

Question

I am tired of the following issue in all browsers

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 used Reactjs with express on top of node js. Here i tried to play a live stream video from the Agora server and it is not playing.When i inspected the console shows the above error. I tried some Cors ad-dons to chrome and it is working perfect. How can we solve this issue by adding this headers directly in the express-react env?

From some tutorials i added the following to solve it:

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"
},

My server.js file:

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

But still it is not working.

Could you please suggest me so solution for this?

Answer 1

You need to send the following headers from you NodeJS server and not specify those in your ReactJS webpack config.

Add the following lines to your NodeJs server code

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