将 AWS Amplify 前端连接到 AWS Elastic Beanstalk 后端时出现 CORS 问题

Posted 2023-03-04

【中文标题】将 AWS Amplify 前端连接到 AWS Elastic Beanstalk 后端时出现 CORS 问题

【英文标题】：CORS issue when connecting AWS Amplify frontend to AWS Elastic Beanstalk backend

【发布时间】：2021-01-21 11:48:12

【问题描述】：

背景：我的应用程序的前端 (Vue) 部署在 AWS Amplify 上，后端 (Python) 部署在 AWS Elastic Beanstalk 上。我的前端是通过 Axios 连接到后端的。

问题：从前端向后端发送数据时，我得到一个CORS error Access to XMLHttpRequest at '***' from origin '***' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

当我的前端向本地主机发送数据时，没有问题，所以我认为我的代码没有问题。我需要更改 Elastic Beanstalk 配置吗？

我不确定我需要包含哪些代码才能获得正确答案，因此请告诉我您希望看到的内容，我可以适当地更新问题。我在下面添加了我的application.py 代码，目前正在使用 Flask-CORS。

from flask import Flask, render_template
from flask import request, session
from flask_cors import CORS
import os
from common.api import api
from journal_blueprint import journal_blueprint
from manuscript_blueprint import manuscript_blueprint
from user_blueprint import user_blueprint
from models.decorators import requires_login
from models.user import User
from models.manuscript import Manuscript
from models.journal import Journal
from config_file import BaseConfig

application=Flask(__name__)

application.secret_key = BaseConfig.SECRET_KEY
application.config['SQLALCHEMY_DATABASE_URI'] = os.environ["DATABASE_URL"]

CORS(application)

application.register_blueprint(journal_blueprint, url_prefix='/journal')
application.register_blueprint(user_blueprint, url_prefix='/user')
application.register_blueprint(manuscript_blueprint, url_prefix='/manuscript')
application.register_blueprint(api, url_prefix="/api")


@application.route('/')
def home_template():
    return render_template('index.html')


@application.route('/login')
def login_template():
    return render_template('user/login.html')


@application.route('/register')
def register_template():
    return render_template('user/register.html')


if __name__ == '__main__':
    # application.run(debug=True)
    application.run()

【参考方案1】：

您的配置看起来不错。请在 elasticbeantalk 日志中查找错误。可能是应用程序在elasticbeanstalk环境中抛出了一些错误，在此期间没有返回CORS头。

【讨论】：

谢谢！我没有考虑查看 EB 日志。当我这样做时，我遇到了这个错误sqlalchemy.exc.OperationalError: (psycopg2.OperationalError) could not connect to server: Connection timed out。我能够通过向安全组添加一个入站规则来解决这个问题，该规则允许来自 0.0.0.0/0 的所有流量。但是，在这里阅读答案：[***.com/questions/50984887/… 表明这对于 prod 来说不是一个好的解决方案，因为它不安全。关于如何使其成为更安全的解决方案的任何想法？

是的，允许所有流量不是一个好主意，尤其是当您的数据库可公开访问时。您的数据库在哪里运行。你在使用亚马逊 RDS 吗？如果您在 AWS 网络中运行数据库，在数据库安全组中，您可以允许来自应用程序安全组的端口 5432 作为源。这是最安全的方式。

docs.aws.amazon.com/vpc/latest/userguide/…