Project Did Not Work. Here Are The Fixes That Worked For Me

[ryanv404]

The project code did not function as desired when using the latest versions of the npm packages as well as the latest version of Google Chrome. Specifically, clicking on the 'New Tweets' tab showed the loading spinner continuously and resulted in multiple CORS-related errors in the console.

The 'Manage Rules' tab seems to function as expected.

The 2 main culprits appeared to be:

1. Missing CORS options in socketIo. My fix was to set the CORS options as follows.

const io = socketIo(server,{ 
  cors: {
    origin: "http://localhost:3000"
  }
});

2. And the use of io.emit('connect'...) in the server when that event type is reserved for the emit method. My fix was simply to delete that line.

These changes allowed the app to work for me.

[sirish123]

The project code did not function as desired when using the latest versions of the npm packages as well as the latest version of Google Chrome. Specifically, clicking on the 'New Tweets' tab showed the loading spinner continuously and resulted in multiple CORS-related errors in the console.

The 'Manage Rules' tab seems to function as expected.

The 2 main culprits appeared to be:

1. Missing CORS options in socketIo. My fix was to set the CORS options as follows.

const io = socketIo(server,{ 
  cors: {
    origin: "http://localhost:3000"
  }
});

2. And the use of io.emit('connect'...) in the server when that event type is reserved for the emit method. My fix was simply to delete that line.

These changes allowed the app to work for me.

do you have a working version of the code?

[ryanv404]

Yes, I've added the repo with the working code to my account.

https://github.com/ryanv404/tweet-streaming-app

[sirish123]

Yes, I've added the repo with the working code to my account.

https://github.com/ryanv404/tweet-streaming-app

Thank you!

[Themrpie]

Thanks for your fixes. I was getting the CORS issues but now that I'm using your server.js I'm still getting the same error, what could it be?
By reading the error I would try to add Access-Control-Allow-Origin header, but if I'm not confused thats something related to the twitter API and not something I can change.

Access to XMLHttpRequest at 'http://localhost:3001/socket.io/?EIO=4&transport=polling&t=O3h_nYb' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.