Значение «null» от источника заблокировано политикой CORS: на запрошенном ресурсе отсутствует заголовок «Access-Control-Allow-Origin» - PullRequest
Новая
       28

Значение «null» от источника заблокировано политикой CORS: на запрошенном ресурсе отсутствует заголовок «Access-Control-Allow-Origin»

1 голос
/ 26 мая 2020

Это мой first.py файл. 

from flask import Flask
from flask_socketio import SocketIO,send

app=Flask(__name__)

app.config['SECRET_KEY']='myscret'
socketio=SocketIO(app)

@socketio.on('message')
def handlemessage(msg):
    print('Message:'+msg)

    send(msg,broadcast=True) 


if __name__=='__main__':
    socketio.run(app,debug=True)

Это index.html файл. 

<html>
<head>
    <title>Chat room</title>
    <script type="text/javascript"  
src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.4.8/socket.io.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
</head>
<body>
    <script type="text/javascript" >
    $(document).ready(function()
    {
        var socket=io.connect('http://127.0.0.1:5000');
        socket.on('connect',function()
        {
            socket.send('User has connected');
        });

    });
    </script>

    <ul id="messages"></ul>

    <input type="text" id="myMessage">
    <button id="sendbtn">Send</button>
</body>

</html>

Но когда я запускаю first.py файл и открываю index.html в Возникает следующая ошибка браузера. 

Access to XMLHttpRequest at 'http://127.0.0.1:5000/socket.io/?EIO=3&transport=polling&t=N9J4bHD' from 
origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on 
the requested resource.  index.html:1 

GET 127.0.0.1:5000/socket.io/?EIO=3&transport=polling&t=N9J4bHD:1 Failed to load resource: 
net::ERR_FAILED   socket.io.min.js:2

Access to XMLHttpRequest at 'http://127.0.0.1:5000/socket.io/? 
EIO=3&transport=polling&t=N9J4bQM' from origin 'null' has been blocked by CORS policy: No 'Access- 
Control-Allow-Origin' header is present on the requested resource.

127.0.0.1:5000/socket.io/?EIO=3&transport=polling&t=N9J4bQM:1 Failed to load resource: 
net::ERR_FAILED

Access to XMLHttpRequest at 'http://127.0.0.1:5000/socket.io/? 
EIO=3&transport=polling&t=N9J4c8L' from origin 'null' has been blocked by CORS policy: No 'Access- 
Control-Allow-Origin' header is present on the requested resource.

Что мне делать, чтобы исправить эту ошибку? Пожалуйста помоги.

Ответы [ 2 ]

0 голосов
/ 27 мая 2020

Я полагаю, вы проводите с этим быстрый тест?

Кажется, у вас есть клиентский файл, который вы открываете непосредственно из файловой системы, поэтому он не обслуживается вашим веб-сервером. Этот файл пытается подключиться к серверу Socket.IO. Веб-браузеры по умолчанию не разрешают подключение из разных источников, поэтому подключение из локально размещенного файла (origin 'null') к вашему серверу (origin 'http://localhost: 5000 ') невозможно, если вы явно не сообщите серверу Socket.IO, что вы это разрешаете.

У вас есть несколько возможных решений:

  • обслуживать ваши файлы HTML / CSS / JS из Flask веб-сервер. Для этого поместите их в папку stati c вашего проекта Flask и откройте их с их адреса http://localhost: 5000 (например, http://localhost: 5000 / static /index.html).

  • настроить параметр cors_allowed_origins сервера Flask -SocketIO для приема подключений от источника null.

0 голосов
/ 26 мая 2020

Пожалуйста, выполните следующие действия:

  1. Установите модуль Flask -CORS. Выполните следующую команду в терминале: 
pip install -U flask-cors
Импортировать модуль: 
app=Flask(__name__)
from flask_cors import CORS
Создайте экземпляр: 
CORS(app)
Создать экземпляр SocketIO, как показано ниже: 
socket = SocketIO(app, cors_allowed_origins="*")
Используйте декоратор socket, как показано ниже: 
@socket.on('message')
def handlemessage(msg):

Примечание: Пункт 4 следует рассматривать только на этапе разработки. Даже на этапе разработки, если вы все еще хотите сузить количество входящих запросов, вы можете попробовать: cors_allowed_origins='null' с вашей настройкой. Но я все еще не рекомендую это в продакшене. В этом случае вы можете настроить cors_allowed_origins в соответствии с размещенным адресом.

...