301 error response when trying to connect to the socket

[JeanPaulSB]

Hi everyone, i've been stuck since a few days with a problem while deploying my socket using a VPS with nginx and gunicorn, I need to point that I'm running an API and the socket in the same flask app instance ( I read that this shouldn't be an issue but I'm not sure about that), the API is running fine but the socket cannot be acessed, i'm trying with postman and with the frontend that I've created and it is showing me the following errors

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

GET http://concursoupb.com/socket.io/?EIO=4&transport=polling&t=OQKNdod net::ERR_FAILED 301 (Moved Permanently)

Right below what I pointed about running the API and the socket in the same app instance

``from flask import Flask
from flask_restful import Resource,Api
from flask_cors import CORS
from flask_socketio import SocketIO,send,emit,join_room,leave_room
from bson import ObjectId,json_util
from threading import Lock


# importing resources
from resources.jurors import Register,Juror,Jurors,Login
from resources.participants import LoadParticipants,Assign,Participants,Participant
from database.db import client
from database.utils import getParticipants,downvoteParticipant,recordTransaction

import json
import logging


app = Flask(__name__)
api = Api(app)
app.config['SECRET_KEY'] = 'secret!'
CORS(app)
socketio = SocketIO(app,logger = True,cors_allowed_origins = '*')

# creating thread
thread = None
thread_lock = Lock()

# accessing our db
db = client.Users
    



api.add_resource(Register,"/api/juror/register")
api.add_resource(Juror,"/api/jurors/<int:upb>")
api.add_resource(Jurors,"/api/jurors/list")
api.add_resource(Login,"/api/login")
api.add_resource(LoadParticipants,"/api/participants/register")
api.add_resource(Assign,"/api/participants/assign")
api.add_resource(Participants,"/api/participants/list")
api.add_resource(Participant,"/api/participant/<participant_id>")

rooms = []

def background_thread():
    while True:
        socketio.sleep(1)
        collection = db.participants
        for room in rooms:
            participants = json.loads(json_util.dumps(getParticipants(room)))
            print(f"getting participants for {room}")
            socketio.emit('participants',participants,to = room)




@socketio.on('join')
def logged(data):
    room = data['room']
    join_room(room)
    rooms.append(room)
    print(f"added room {room}")
    global thread
    with thread_lock:
            if thread is None:
                thread = socketio.start_background_task(background_thread)
    emit('my_response','connected')
    print("user connected")

@socketio.on('leave')
def leave(data):
    room = data['room']
    print(f"user {room} is leaving its room")
    leave_room(room)
    print(rooms)
    rooms.remove(room)
    print(rooms)

    

@socketio.on('downvote')
def downvote(data):
    id = data['participant_id']
    downvoteParticipant(id)
    recordTransaction(data)
    print(f"downvoted {id}")

``



                      

I'm gonna list below some config files of my systemd file and nginx respectively

/etc/systemd/system/backend.service

[Unit]
Description = Gunicorn instance to serve my app backend
After = network.target
[Service]
User = jeanpaul
Group = www-data
WorkingDirectory = /home/jeanpaul/concurso/backend
ExecStart = /home/jeanpaul/concurso/backend/myenv/bin/gunicorn --workers 3 --threads 100 --bind unix:backend.s>
[Install]
WantedBy = multi-user.target
`

etc/nginx/sites-available/backend

  GNU nano 6.4                                                                                                                                  /etc/nginx/sites-available/backend                                                                                                                                            
server{



        listen 127.0.0.1:5000;
        server_name concursoupb.com  www.concursoupb.com;
        location / {
        root /var/www/app;
        index index.html;
        try_files $uri $uri/ /index.html =404;
        }

 location /api/ {
        include proxy_params;
         proxy_pass http://unix:/home/jeanpaul/concurso/backend/backend.sock;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
        }

  location /socket.io  {
        include proxy_params;
        proxy_http_version 1.1;
        proxy_buffering off;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "Upgrade";
        proxy_pass http://127.0.0.1:5000/socket.io;


        }




    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/concursoupb.com/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/concursoupb.com/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot




}




server{
    if ($host = www.concursoupb.com) {
        return 301 https://$host$request_uri;
    } # managed by Certbot


    if ($host = concursoupb.com) {
        return 301 https://$host$request_uri;
    } # managed by Certbot


        server_name concursoupb.com  www.concursoupb.com;
    listen 80;
    return 404; # managed by Certbot




}

Finally, my entrypoint looks like this

`""" app entrypoint """
from app import socketio
from app import app

if __name__ == "__main__":
    socketio.run(app,debug = True, port= 5000,host = '0.0.0.0',)
    print("running app...")
`

Some lines of the nginx access.log

- - [27/Feb/2023:19:33:54 +0000] "GET /socket.io/?EIO=4&transport=polling&t=OQKO4t6 HTTP/1.1" 301 178 "myip" "Mozilla/5.0 (iPhone; CPU iPhone OS 13_2_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.3 Mobile/15E148 Safari/604.1 Edg/110.0.0.0"

Thank guys for helping me, I'm just feeling so frustrated about this since i cannot find more info about this issue and I have spent a lot of time wit this.

[miguelgrinberg]

You've told your nginx to return a 301 response when the user connects the http:// instead of https://. This 301 response does not include CORS headers because it doesn't even reach Python.

Either expand your 301 response to include CORS headers, or have your client connect directly to the https:// endpoint.

[miguelgrinberg]

Your Python server is returning 400 errors now. Check the log to find out why.

[JeanPaulSB]

Thanks! I finally set it up and it's working fine, now I have a question, does it work with Safari? because I tried to access with my phone and it's not working so idk what's happening with that, in other browsers works fine, thanks again for your help.

[miguelgrinberg]

The server does not care about what browser you are running, and as far as I know the Socket.IO JS client is compatible with mobile browsers on both iOS and Android.

[Mogesh21]

RewriteEngine On

# Bypass proxy for WebSocket upgrade requests (important)
RewriteCond %{HTTP:Upgrade} =websocket [NC]
RewriteCond %{HTTP:Connection} upgrade [NC]
RewriteRule ^ - [L]

# Proxy root URL to port 8200
RewriteRule ^$ http://127.0.0.1:8200/ [P,L]

# Proxy all other requests to port 8200 (except actual files and directories)
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ http://127.0.0.1:8200/$1 [P,L]

when i use this htaccess for my apache server and try to connect to the socket ,I got the same 301 error including cors

[miguelgrinberg]

@Mogesh21 301 is not an error, it is a redirect. Look at the Location header in this response, as that may give you a clue about why your Apache is redirecting.