Проблема CORS с Vue.js и Flask: XMLHttpRequest заблокирован ⇐ Python
-
Гость
Проблема CORS с Vue.js и Flask: XMLHttpRequest заблокирован
Описание:
Я создаю веб-приложение, используя Vue.js для внешнего интерфейса и Flask для внутреннего интерфейса. Я начинаю с простой страницы входа. Однако я сталкиваюсь с проблемой CORS (совместное использование ресурсов между источниками) при отправке запросов из моего приложения Vue.js к серверной части Flask.
Проблема:
Когда я пытаюсь отправить POST-запрос из моего приложения Vue.js по адресу http://localhost:8081 на мой сервер Flask по адресу http://localhost:5000, я получаю следующую ошибку:
Доступ к XMLHttpRequest по адресу «http://localhost:5000/login» из источника «http://localhost:8081» заблокирован политикой CORS: ответ на предполетный запрос не проходит проверку контроля доступа: нет ' Заголовок Access-Control-Allow-Origin присутствует в запрошенном ресурсе.
Код:
LoginForm.vue
Войти Имя пользователя: Пароль: Войти {{ сообщение }} импортировать аксиомы из «аксиом»; экспортировать по умолчанию { данные() { возвращаться { имя пользователя: '', пароль: '', сообщение: '', }; }, методы: { асинхронный вход() { пытаться { const ответ = ожидайте axios.post('http://localhost:5000/login', { имя пользователя: это.имя_пользователя, пароль: этот.пароль, }); если (response.status === 200) { this.message = 'Вход успешен!'; } еще { this.message = 'Неверные учетные данные'; } } поймать (ошибка) { console.error('Произошла ошибка:', error); } } }, }; app.py
из фляги импорта Flask, request, make_response, jsonify из flask_cors импортировать CORS, cross_origin из опасного импорта TimedJSONWebSignatureSerializer как Serializer импортировать ОС приложение = Колба(__name__) CORS(app, resources={r"/*": {"origins": "http://localhost:8081"}}) # Пример пользовательских данных (для демонстрационных целей) пользователи = [ {"имя пользователя": "пользователь1", "пароль": "пароль1"}, {"имя пользователя": "пользователь2", "пароль": "пароль2"}, ] SECRET_KEY = os.urandom(24) защита генерировать_user_token(): сериализатор = Сериализатор (SECRET_KEY, expires_in=3600) token_data = {'is_admin': True} токен = seriesizer.dumps(token_data).decode('utf-8') токен возврата @app.route('/login', методы=['POST']) @cross_origin(origin="http://localhost:8081", support_credentials=True) защита входа(): данные = request.get_json() имя пользователя = data.get('имя пользователя') пароль = data.get('пароль') для пользователя в пользователях: if user['username'] == имя пользователя и user['password'] == пароль: если имя пользователя == 'пользователь1': токен = генерировать_user_token() return make_response(jsonify({'token': token}), 201) return jsonify({"message": "Вход успешен!"}), 200 # Возвращает 403, если пароль неправильный вернуть make_response( «Не удалось проверить», 403, {'WWW-Authenticate': 'Basic Realm="Неверный пароль!!"'} ) если __name__ == '__main__': app.run(отладка=Истина) Запрос:
Я был бы признателен за любые рекомендации о том, как решить эту проблему CORS и включить связь между моими приложениями Vue.js и Flask. Следует ли мне предпринять какие-либо дополнительные действия для обеспечения правильной настройки CORS?
Что я пробовал:
-Я установил Flask-CORS и настроил его в своем приложении Flask. -Я добавил необходимые заголовки CORS в свои маршруты Flask, включая заголовок Access-Control-Allow-Origin. -Я убедился, что мое приложение Vue.js и сервер Flask работают на указанных портах.
Несмотря на эти усилия, проблема CORS сохраняется, и я не могу отправлять запросы из моего приложения Vue.js к серверной части Flask.
Заголовки запросов от почтальона
Заголовок ответа от почтальона
Описание:
Я создаю веб-приложение, используя Vue.js для внешнего интерфейса и Flask для внутреннего интерфейса. Я начинаю с простой страницы входа. Однако я сталкиваюсь с проблемой CORS (совместное использование ресурсов между источниками) при отправке запросов из моего приложения Vue.js к серверной части Flask.
Проблема:
Когда я пытаюсь отправить POST-запрос из моего приложения Vue.js по адресу http://localhost:8081 на мой сервер Flask по адресу http://localhost:5000, я получаю следующую ошибку:
Доступ к XMLHttpRequest по адресу «http://localhost:5000/login» из источника «http://localhost:8081» заблокирован политикой CORS: ответ на предполетный запрос не проходит проверку контроля доступа: нет ' Заголовок Access-Control-Allow-Origin присутствует в запрошенном ресурсе.
Код:
LoginForm.vue
Войти Имя пользователя: Пароль: Войти {{ сообщение }} импортировать аксиомы из «аксиом»; экспортировать по умолчанию { данные() { возвращаться { имя пользователя: '', пароль: '', сообщение: '', }; }, методы: { асинхронный вход() { пытаться { const ответ = ожидайте axios.post('http://localhost:5000/login', { имя пользователя: это.имя_пользователя, пароль: этот.пароль, }); если (response.status === 200) { this.message = 'Вход успешен!'; } еще { this.message = 'Неверные учетные данные'; } } поймать (ошибка) { console.error('Произошла ошибка:', error); } } }, }; app.py
из фляги импорта Flask, request, make_response, jsonify из flask_cors импортировать CORS, cross_origin из опасного импорта TimedJSONWebSignatureSerializer как Serializer импортировать ОС приложение = Колба(__name__) CORS(app, resources={r"/*": {"origins": "http://localhost:8081"}}) # Пример пользовательских данных (для демонстрационных целей) пользователи = [ {"имя пользователя": "пользователь1", "пароль": "пароль1"}, {"имя пользователя": "пользователь2", "пароль": "пароль2"}, ] SECRET_KEY = os.urandom(24) защита генерировать_user_token(): сериализатор = Сериализатор (SECRET_KEY, expires_in=3600) token_data = {'is_admin': True} токен = seriesizer.dumps(token_data).decode('utf-8') токен возврата @app.route('/login', методы=['POST']) @cross_origin(origin="http://localhost:8081", support_credentials=True) защита входа(): данные = request.get_json() имя пользователя = data.get('имя пользователя') пароль = data.get('пароль') для пользователя в пользователях: if user['username'] == имя пользователя и user['password'] == пароль: если имя пользователя == 'пользователь1': токен = генерировать_user_token() return make_response(jsonify({'token': token}), 201) return jsonify({"message": "Вход успешен!"}), 200 # Возвращает 403, если пароль неправильный вернуть make_response( «Не удалось проверить», 403, {'WWW-Authenticate': 'Basic Realm="Неверный пароль!!"'} ) если __name__ == '__main__': app.run(отладка=Истина) Запрос:
Я был бы признателен за любые рекомендации о том, как решить эту проблему CORS и включить связь между моими приложениями Vue.js и Flask. Следует ли мне предпринять какие-либо дополнительные действия для обеспечения правильной настройки CORS?
Что я пробовал:
-Я установил Flask-CORS и настроил его в своем приложении Flask. -Я добавил необходимые заголовки CORS в свои маршруты Flask, включая заголовок Access-Control-Allow-Origin. -Я убедился, что мое приложение Vue.js и сервер Flask работают на указанных портах.
Несмотря на эти усилия, проблема CORS сохраняется, и я не могу отправлять запросы из моего приложения Vue.js к серверной части Flask.
Заголовки запросов от почтальона
Заголовок ответа от почтальона
