Python Flask CORS - 没有“访问控制允许来源”Z099FB995346F31C95EZF6 上存在请求的资源

Question

我在 Shopify 产品页面上编写了一个简单的 Ajax 脚本。 每当单击上传按钮时，将触发此脚本并向 API 服务器发送 json 消息

 jQuery.ajax({
            url: "https://e20e2287e2cb.ngrok.io/return_json",
            type: "POST",
            data: form_data,
            processData: false,
            contentType: false,
            contentType: "application/json",
            success: function (result) {
              var obj = jQuery.parseJSON( result );
                jQuery(".select-loader").remove(); 
                jQuery("body").removeClass('active-loader');
                jQuery("#upload_image").removeClass("err");
                jQuery("#upload_image").val("");
                jQuery("#google_folder_id").val(obj.imguniquename);
                jQuery("#customImage").val(obj.imgname);
                jQuery("#customImageUrl").val(obj.folder_id);
                jQuery("#customUniqueImage").val(obj.imguniquename);
                
                jQuery("#upload_image").after('<p class="note note--success">Image uploaded successfully.</p>');
                Cookies.set('google_folder_id', obj.imguniquename);
                Cookies.set('customImage', obj.imgname);
                Cookies.set('customImageUrl', obj.folder_id);
                Cookies.set('customUniqueImage', obj.imguniquename);

            }
          });

在 API 服务器中，我用 Python 编写了以下代码：

#Flask Library
from flask import Flask, request, jsonify
from flask_cors import CORS, cross_origin
from flask_ngrok import run_with_ngrok

app = Flask(__name__)
logging.basicConfig(level=logging.INFO)
logging.getLogger('flask_cors').level = logging.DEBUG
CORS(app)
run_with_ngrok(app) 

@app.route("/return_json", methods=["POST"])
def returnJson():
    return jsonify({'folder_id':'yoyo', 'img':'adad', 'imgname':'bibi', 'imguniquename':'kaka'})

if __name__ == '__main__':
    app.run()

谁能告诉我为什么每当触发 Ajax 脚本时我会在浏览器控制台中出现以下错误？

1. Access to XMLHttpRequest at 'https://e20e2287e2cb.ngrok.io/return_json' from origin 'https://www.abcabc.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present在请求的资源上。
2. 发布 https://e20e2287e2cb.ngrok.io/return_json net::ERR_FAILED

同时，在 API 服务器端，调试日志对我来说看起来很好，如下所示：

调试： flask_cors.extension：对“/return_json”的请求与 CORS 资源“/”匹配。 使用选项：{'origins': ['. '], '方法': 'DELETE, GET, HEAD, OPTIONS, PATCH, POST, PUT', 'allow_headers': ['。 ']，'expose_headers'：无，'supports_credentials'：假，'max_age'：无，'send_wildcard'：假，'automatic_options'：真，'vary_header'：真，'resources'：'/ '，'intercept_exceptions' ：真，'always_send'：真}

调试： flask_cors.core:CORS 请求收到“原点” https://www.abcabc.com

DEBUG： flask_cors.core：请求的 Origin header 匹配。 发送 CORS 标头。

调试： flask_cors.core：设置 CORS 标头：MultiDict（[（'Access-Control-Allow-Origin'，'https://www.abcabc.com'），（'Vary'，'Origin'）]）信息： werkzeug：127.0.0.1 - - [23/Apr/2021 11:04:44] “POST /return_json HTTP/1.1”200 -

Answer 1

由于我没有注意到您已经在使用 Flask-CORS，因此我正在通过一些进一步的调查来更新这个答案。

我已经启动了一个测试环境并设法使这个跨域请求正常工作而无需更改您的代码。 在此过程中，我想出了以下可能导致您出现问题的原因：

1. 请务必请求现有的隧道端点。 获取关闭的 NGROK 隧道端点会导致 CORS 错误，它不会引发 404。为了确保我请求正确的隧道，我编写了一个仅返回成功的索引视图路由。 我还使用此端点确保为所有 HTTP 方法（GET、POST...）正确设置了 CORS；
2. 请务必导入日志记录，Flask 可以延迟评估应用程序并仅在请求时引发异常。 查看您的控制台以获取回溯；
3. 在 Flask 中，如果在请求期间发生异常，请求处理流程将中止，并且永远不会调用 Flask-CORS 将其标头添加到响应 object 中，并且您的浏览器将始终抱怨“Access-Control-Allow-Origin” . 这就是为什么您应该始终检查浏览器的“响应选项卡”，它可能包含回溯或其他一些有用信息；
4. 检查 NGROK introspect 访问 http://localhost:4040/ 中的一些信息，它可以帮助您跟踪许多问题；
5. 我在运行通过 pip 提供的 flask-ngrok 时遇到了一些问题。 我已经从 GitHub 下载了它的源代码并将其导入到我的演示应用程序中。 坦率地说，我会放弃这个扩展，只在另一个控制台中运行$ ngrok http 5000 ；
6. 请务必设置 FLASK_DEBUG=true 否则它可能会对您隐藏一些信息/回溯。

检查此要点以获取我使用的源代码和一些证据： https://gist.github.com/magnunleno/8dad91f133a22322250d6cb609792597

如果您发现任何新信息或追溯，请告诉我，以便我们制定解决方案。

旧答案

当您在特定域下运行服务器（在您的情况下为 e20e2287e2cb.ngrok.io）但您的 web 客户端在不同域中运行（假设www.abcabc.com ）并且他们尝试通信时，就会发生这种情况。 你真的应该看看这个。

可以通过管理您的应用程序标头Access-Control-*来配置此行为，幸运的是，有一个很好的扩展程序可以为您执行此操作，称为Flask-CORS 。