0

I have a Flask socket.io app (backend) hosted on Heroku.

I have frontend with the JS code to connect to the host at my local machine. I am getting the following error while trying to connect to the server.

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://deploy-appp.herokuapp.com/socket.io/?

EIO=3&transport=polling&t=MH05dP-. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://deploy-appp.herokuapp.com/socket.io/?

EIO=3&transport=polling&t=MH05f5A. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

Link to the backend application

JS code for socket connection:

<script type="text/javascript">
var socket = io.connect('https://deploy-appp.herokuapp.com/');
socket.on('connect', function() {
console.log('connected');
});
socket.on('message', function(msg) {
document.getElementById('messages').append('<li>'+msg+'</li>');
console.log('Received message');
});
function send() {

console.log(document.getElementById('myMessage').value)
socket.send(document.getElementById('myMessage').value)

};
</script>
Rohit Thapliyal
  • 27
  • 6

1 Answers1

0

Check out the cors wiki . Usually you'll get an error like this if your front end application is 'running' from a different uri to your backend. Say for example, the host of your client side code is myclient.com but your socket.io back end is running on anotherclient.com .

There are a number of solutions to this, you can explicitly set the origins, see this answer Socket.io + Node.js Cross-Origin Request Blocked. (This is quickest thing if you're running your web application local, but not secure long term)

Alternatively, have a reverse proxy in front of your client web server and your socketio app, where the proxy would route the client /socketio calls to your socketio server, and the other request to the server hosting your site.

jakhicks
  • 584
  • 1
  • 5
  • 8