Handling preflight requests with extraHeaders?

[fgortiz]

Hi,

Whenever I try to connect to my socket.io server using the extraHeaders option for the polling transport, I can't seem to be able to connect; I always get a 405 - METHOD NOT FOUND error in the preflight request that I don't get without.

Official policy appears to be Adding a method for preflight requests, but I can't quite find something similar in the flask-socket.io docs.

[miguelgrinberg]

Flask-SocketIO should, in theory, handle the CORS preflight requests already. Can you look in the network tab of your browser's console to see exactly what request the browser is sending the comes back as a 405?

Edit: I reviewed the code and you may be right. If the browser sends an OPTIONS preflight request (which is unusual for GET requests), then that is going to come back as a 405. So I think the solution to your problem is for me to add a response for OPTIONS.

[fgortiz]

Thanks!

Also, while it is probably unusual to send a preflight request for a GET, it happens because I'm using socket.io for real time communication between an Ionic mobile app and my Python backend. It works well when debugging using a phone, since they don't send preflight requests, but it doesn't work when debugging on desktop.

[TheNewToddler]

I had the same issue. I just installed eventlet and then things worked. Not sure how it works but thought I would share.

[corescript]

For CORS Use

const io = require('socket.io')(3000, {
handlePreflightRequest: function (req, res) {
var headers = {
'Access-Control-Allow-Headers': 'Content-Type, Authorization',
'Access-Control-Allow-Origin': req.headers.origin,
'Access-Control-Allow-Credentials': true
};
res.writeHead(200, headers);
res.end();
}
});

[fgortiz]

Any update?

[90K2]

Agree that when I use custom headers, browser sending OPTIONS request and gettin 405 Not allowed back.

[miguelgrinberg]

@fgortiz @90K2 can I ask you to install the master branch for python-engineio and test the CORS preflight request support? If you confirm that it works, I'll cut a new release. Thanks!

[90K2]

@miguelgrinberg it's looks like a magic but browser is not asking OPTIONS anymore and all requests are processing correct. Seems that it works ^_^

[miguelgrinberg]

Right, that is why I have never seen this problem before. I have never seen OPTIONS requests being sent for Socket.IO. Not sure what is the proper environment to reproduce this, but if you find out let me know.

[90K2]

Hmm I thinks it's easy to reproduce.
My use case was like this: I have added custom header X-Auth-Access-Token on front app due to authorization and with other headers this react app going to socketio server.

That's all, this custom header provoked browser to enable CORS I guess and making OPTIONS preflight requests for each request to backend.

[miguelgrinberg]

@90K2 Ah! Right, forgot that custom headers also cause preflight requests to be issued. Thanks!

[miguelgrinberg]

This fix is now released with python-engineio v2.1.0.

[3mp3ri0r]

Hi there I still got the issue. socketio client ask for preflight when connecting using polling. This is server stack I use:

python-engineio==2.1.0
python-socketio==1.9.0

Any idea to solve this issue?

N.B. I'm using python-socketio with sanic.
This is error message i got:

sanic.exceptions.InvalidUsage: Method OPTIONS not allowed for URL /socket.io/

[miguelgrinberg]

Oh, sorry about that, I missed declaring the method from the sanic side. I implemented the support for it, but sanic is not configured to dispatch that method. I need to fix this.

[miguelgrinberg]

This is fixed in release 2.1.1 of python-engineio.

[DavidLeibs]

I am trying to run the basic flask-socketio example on macOS Catalina. I get a 405 Method Not Allowed error on Safari. It works on Chrome. If I disable cross origin restrictions on Safari it works. What is the right setup for app.py so that I might run without having to disable Safari's cross origin restriction setting? I suspect I am just too new to Flask and Flask-SocketIO to do what must be obvious to someone with more. I have found the advice I find on various stack exchange threads to not be helpful.

[miguelgrinberg]

@DavidLeibs Can you provide more details on this error? What is the attempted method? What URL? This information should be available from the developer console.

[DavidLeibs]

It seems like something wacky with Safari. It goes bad right at the beginning When I load the index.html page the developer console shows:

Cross-origin redirection to https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js denied by Cross-Origin Resource Sharing policy: Origin http://localhost:5050 is not allowed by Access-Control-Allow-Origin.

Cross-origin script load denied by Cross-Origin Resource Sharing policy.

ReferenceError: Can't find variable: io

Failed to load resource: Cross-origin redirection to https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js denied by Cross-Origin Resource Sharing policy: Origin http://localhost:5050 is not allowed by Access-Control-Allow-Origin.

This does not happen when I "Disable Cross-Origin Restrictions"

I do not see this with Chrome.

[miguelgrinberg]

@DavidLeibs I don't know what is it specifically that your Safari does not like. When I request the socket.io.js URL it comes back with the correct CORS header that allows all origins.

Do you get a different CORS header there?

[DavidLeibs]

I safari 14.0 just does not seem to want to fetch jquery and socket.io with the script tags as you specified them.

Changing the script tags to:

<script src="//code.jquery.com/jquery-1.12.4.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js"></script>

works just fine (which is sad).

Here is a link to bugs.webkit.org that might go a little way in explaining what's going on.

 https://bugs.webkit.org/show_bug.cgi?id=171566

I had already just grabbed the javascript from Cloudflare and Jquery and put it on my development server and moved on but I hope that leaving this trail will help the next person that wants the example to work out of the box and also happens to be using Safari to thinking that they are going crazy. :-)

[tallPaul66]

@DavidLeibs Thank you for posting the js code that works for Safari. I was having exactly the same issue you were (but I'm using Safari 14.1.2), but did not have the issue in Chrome. But I wanted you to know that your posting the solution here helped me a lot (fixed the issue completely), so I guess I was one of those "next person(s)" you intended to help, and indeed it did. Thanks!