如何允许谷歌云中的 CORS 运行？

Question

我有一个反应微服务（通过 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

一切都是自己造成的。

正如 Dustin Ingram 所说，如果您为 Flask 启用 CORS，它将起作用。我仍然不知道为什么我会遇到 CORS 问题，我从一开始就为我的 Flask 应用启用了 CORS。

在我对所有内容都进行了核对并重新部署后，CORS 问题就消失了。但是，我最终还是得到了 404、405 和 308。

有几个问题，我所有的缺点，结合起来给了我这些问题。在 create-react-app （我认为 webpack 正在这样做）中，传递给 docker 运行时的环境变量没有得到尊重，因此我在 Cloud Run 中设置的环境变量根本不起作用。目前我选择了 process.env.VARIABLE || “硬编码网址”路线。一旦我弄清楚了，我还记得烧瓶 URL 中的尾部斜杠是不好的......那些给了我 308s，永久重定向。弄清楚这一点后，我意识到在手动部署期间，我并没有将云构建映像切换到最新版本。叹。一旦我开始部署最新的图像，一切都开始工作了。耶！

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

Answer 3

我最近也在为此苦苦挣扎...我的问题是尝试使用一些 JS 库来使我的 URL 请求“更容易”，而是在请求端（而不是服务器端）修改标头。切换到直接使用 XMLHttp 并开始正常工作。我也从application/json 切换到application/x-www-form-urlencoded。我不知道这是否有所不同，但为了完整起见，将其包括在内。

你也不应该（我说不应该，但你知道这是怎么回事）除了：

CORS（应用程序）。所有@cross-region 的东西和配置片段都只是为了进行更窄的 CORS 访问，因此它不是完全开放的，但无论如何你在初始代码中都将它完全开放（CORS(app, resources={r"/*": {"origins": "*"}}) 与 @ 相同，我相信987654324@).

长话短说，尝试查看请求对象，而不是 Flask 端。

编辑：在我无法让“获取”库工作后添加对我有用的请求代码：

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