Chrome 65 - 无法从本地文件向 Flask 发出 POST 请求

Posted

技术标签:

【中文标题】Chrome 65 - 无法从本地文件向 Flask 发出 POST 请求【英文标题】:Chrome 65 - unable to make POST requests from local files to Flask 【发布时间】:2018-08-21 17:23:16 【问题描述】:

我正在运行以下代码:

from flask import Flask, jsonify
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

@app.route('/test', methods=['POST'])
def test():
    return jsonify('result': 'hello'), 201

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

在尝试打开以下页面时,我收到错误消息:

“Access-Control-Allow-Origin”标头的值为“null”,即 不等于提供的来源。因此,原点“空”不是 允许访问。

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
</head>
<body>
<script>
  function func() 
    $.ajax(
      url: "http://0.0.0.0:5000/test",
      method: "POST",
      contentType: "application/json"
    );
  
  window.onload = func
</script>
</body>
</html>

Chrome 64 不会出现这种情况。有人知道这是为什么吗?

【问题讨论】:

【参考方案1】:

不需要将本地文件挂载到 Web 服务器的替代解决方案可以通过允许通过 CORS 进行跨域来完成。 (如果您需要多个本地文件很有用 - 例如链接 javascript/css 文件)。

只需替换行:

CORS(应用程序)

CORS(app, send_wildcard=True)

查看CORS API doc了解更多详情

【讨论】:

【参考方案2】:

我猜您正在浏览 file:// 域(而不是通过 HTTP)上的测试页面 - file:// 资源对 CORS 的支持有限。

如果您在 Web 服务器上浏览测试页面,则 CORS 会按预期工作。例如,您可以运行如下命令来启动一个简单的 php Web 服务器:

php -S localhost:5001 ./test.html

然后通过网址http://localhost:5001/访问页面

【讨论】:

谢谢马特,这真的很有帮助。我想知道 Chrome 65 中发生了什么变化以禁止该活动。

以上是关于Chrome 65 - 无法从本地文件向 Flask 发出 POST 请求的主要内容,如果未能解决你的问题,请参考以下文章

chrome 开发者工具 - local overrides

更新android chrome 65版后,应用程序无法运行,Sencha touch和cordova android

无法将其他flas动画片段访问到动作脚本3

使用 Chrome 在画布上本地绘制图像

无法从 Kubernetes 集群上的 Angular pod 向服务发出 GET 请求

Chrome中本地文件无法使用XMLHTTPRequest对象的解决方法