4

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?

gitu
  • 219
  • 6
  • 18
  • 1
    Possible duplicate of [How to allow CORS?](http://stackoverflow.com/questions/7067966/how-to-allow-cors) – cartant Mar 28 '17 at 08:10

2 Answers2

5

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();
});
Shubham Khatri
  • 270,417
  • 55
  • 406
  • 400
  • I have tried the same code in the server.js file in my project root.But i didnt work.Am i doing it in correct way? Because i am new to the react,node things. I just added the server.js code in my main question.Please have a look. – gitu Mar 28 '17 at 10:11
  • Somewhere in your code you are trying to perform API requests on `http://vid-129002.hls.chinanetcenter.broadcastapp.agoraio.cn/live/pub421490684319281/playlist.m3u8.` which I think doesn't have CORS enabled and hence it doesn't work for you. You will need to set up CORS headers on the above API server – Shubham Khatri Mar 28 '17 at 10:22
  • http://vid-129002.hls.chinanetcenter.broadcastapp.agoraio.cn‌​/live/pub42149068431‌​9281/playlist.m3u8 .This is a test url given by Agora live streaming service to test some live streams from our web app. I am trying to play this live stream via an hls player from my web app. – gitu Mar 28 '17 at 10:36
  • Can you read the documentation from where you got this API URL. because I think they will not be allowing CORS on thier API – Shubham Khatri Mar 28 '17 at 10:42
  • The thing is i managed to play the url from some other online hls player and also from one of my previous codeigniter app. Now we moved to react and here trying to do the same. I sent a mail on the cors issue to that service. – gitu Mar 28 '17 at 10:55
1

Using Firefox I encountered the error:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:3001/xyz. (Reason: CORS request did not succeed).

So while this didn't work:

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

All it took to fix it is changing the address to "http://localhost:3000", like this:

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

Also, the way I figured it out was using the "CORS errors" page of the MDN web docs:

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

Sha
  • 37
  • 8