如何允许CORS在谷歌云运行

Question

我在谷歌云上部署了一个react微服务(通过nginx(，其后端环境变量设置为另一个运行gunicorn的谷歌云运行实例，该实例正在为后端服务。

我的Flask应用程序是按照我能找到的关于允许CORS:的一切设置的

app = Flask(__name__)
app.config.from_object(config)
CORS(app, resources={r"/*": {"origins": "*"}})
app.config['CORS_HEADERS'] = 'Content-Type'
return app
# Different file, a blueprint's urls:
@blueprint.route('/resources')
@cross_origin()
def get_resources():
...

然而，我仍然得到可怕的Access to XMLHttpRequest at 'https://backend/resources/' from origin 'https://frontend' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

有人对此有任何见解吗？我想用我的微服务建立GKE，但最初选择了阻力最小的路径，在云中建立了一个POC。我有后台与我的Cloud SQL实例进行对话，我非常接近！！

谢谢

Answer 1

您已经设置了超出需要的内容。除非您需要为不同的端点提供不同的CORS访问，否则最简单的示例只需要调用CORS(app):

from flask import Flask
from flask_cors import CORS
app = Flask(__name__)
CORS(app)
@app.route("/resources")
def get_resources():
return "Hello, cross-origin-world!"
if __name__ == "__main__":
app.run('0.0.0.0', 8080, debug=True)

你会看到标题出现了：

$ curl -I localhost:8080/resources
HTTP/1.0 200 OK
Content-Type: text/html; charset=utf-8
Content-Length: 26
Access-Control-Allow-Origin: *
Server: Werkzeug/1.0.1 Python/3.7.4
Date: Tue, 21 Apr 2020 17:19:25 GMT

Answer 2

一切都是自己造成的。

正如达斯汀·英格拉姆所提到的，如果你为Flask启用CORS，它就会起作用。我仍然不知道为什么我会遇到CORS问题，我从一开始就为我的Flask应用程序启用了CORS。

在我把所有东西都用核武器重新部署后，CORS问题就消失了。然而，我最终还是获得了404、405和308。

有几个问题，我所有的缺点，加在一起给了我这些问题。在create-react应用程序(我认为webpack正在做这件事(中，传递到docker运行时的环境变量没有得到尊重，所以我在Cloud Run中设置的环境变量根本不起作用。目前我选择了process.env.VARIABLE||"硬编码url"路由。一旦我弄清楚了这一点，我还记得烧瓶URL中的尾随斜杠很糟糕。。。。这些给了我308，永久重定向。一旦我弄清楚了这一点，我意识到在手动部署过程中，我并没有将云构建映像切换到最新的。叹气一旦我开始部署最新的映像，一切都开始工作了。耶！

感谢Dustin和Gabe把你的时间花在我的愚蠢上。

Answer 3

我最近也在努力解决这个问题。。。我的问题是试图使用一些JS库来让我的URL请求"更容易"，而不是在请求端(而不是服务器端(屏蔽标题。切换到只使用直接的XMLHttp，它开始正常工作。我也从application/json切换到application/x-www-form-urlencoded。我不知道这是否有什么不同，但为了完整性，包括它。

你也不应该(我说不应该，但你知道怎么回事(需要除了之外的任何东西

CORS(应用程序(。所有@跨区域的东西和配置都只是为了进行更窄的CORS访问，所以它不是完全开放的，但在初始代码中，它是完全开放的(我认为CORS(app, resources={r"/*": {"origins": "*"}})和CORS(app)是一样的(。

长话短说，试着看看请求对象，而不是Flask方面。

编辑：在我无法使"获取"库工作后，添加对我有效的请求代码：

var xhttp = new XMLHttpRequest();
xhttp.open("POST", <url>, true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
xhttp.send(Data)

Answer 4

我也遇到了同样的问题，它是通过在Cloud Run中设置允许未经验证的调用来解决的。但是，这只能通过测试来完成，对于生产环境，您必须配置Cloud IAM。