从 Flask API 获取“请求的资源上不存在‘Access-Control-Allow-Origin’标头”答案

【问题标题】：Getting "No 'Access-Control-Allow-Origin' header is present on the requested resource" from Flask API从 Flask API 获取“请求的资源上不存在‘Access-Control-Allow-Origin’标头”
【发布时间】：2019-09-04 14:32:50
【问题描述】：

我有一个 Flask 服务器并尝试通过 AJAX 调用向服务器发出 GET 请求。结果，我在浏览器的控制台中收到以下错误：

GET http://ip:port/endpoint 500（内部服务器错误）

从源“http://ip:websitePort”访问“http://ip:APIport/endpoint”处的 XMLHttpRequest 已被 CORS 策略阻止：请求的资源上不存在“Access-Control-Allow-Origin”标头。

下面是我用来发送请求的js代码：

var xhr;
    if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest();
    } else {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }

    var data = x;

    xhr.open("GET", "http://ip:APIport/endpoint");
    xhr.setRequestHeader("Accept", "application/json");
    xhr.setRequestHeader("Content-Type", "image/png");
    xhr.setRequestHeader("Authorization", "Basic somestring);

    xhr.onload = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
            console.log(this.responseText);

            if (callback instanceof Function) {
                callback(results);
            }
        } 
    }

    xhr.onerror = function (e) {
        console.error(xhr.statusText);
    };

    xhr.send(data);

这是我的 Flask 服务器配置：

from flask import Flask
from flask_cors import CORS, cross_origin
from flask import request


app = Flask(__name__)
CORS(app)


@app.route('/endpoint', methods=['GET', 'OPTIONS'])
def endpoint():

    result = 'Hello World'

    return result

请注意，Flask API 在 docker 容器中工作，当我通过 Postman 发出请求时一切正常。

如果您对错误有任何建议，请帮忙？

【问题讨论】：

您的请求需要 CORS 标头，因为端口号不同。您必须适当地配置您的服务器。 CORS 标头必须用于响应“API 端口”请求的任何服务器。
xhr.setRequestHeader("Content-Type", "image/png"); 到底是为了什么？您正在发出 GET 请求。您不是在发布或放置图像文件。

标签： javascript python-3.x ajax flask

【解决方案1】：

我认为你应该将 cross_origin 装饰器添加到你的函数中

试试这个：

from flask import Flask, request
from flask_cors import CORS, cross_origin 


app = Flask(__name__) 
CORS(app)


@app.route('/endpoint', methods=['GET', 'OPTIONS']) 
@cross_origin()
def endpoint():

    result = 'Hello World'

    return result

【讨论】：

【解决方案2】：

我将 GET 更改为 POST，对我来说一切正常，感谢您的回答。

【讨论】：