请求和获取返回两个截然不同的东西（python/javascript）

Question

我的 python api 请求有效，但我的 javascript 提取不起作用

我的 python 函数在点击 API url 时起作用。它按预期返回数据。但是，我的 Javascript 函数返回 CORS 错误。我的困惑在于我的 requests 函数如何没有跨源问题，但 fetch 却有？

get_web_impact.py

在 Flask 服务器上运行服务器端

import requests


def get_website_impact(website_url):
    website_url = f'https://api.websitecarbon.com/site?url={website_url}'
    req = requests.get(website_url)
    resp = req.json()
    results = {
        'url': resp.get('url'),
        'green': resp.get('green'),
        'cleanerThan': resp.get('cleanerThan'),
        'rating': resp.get('rating'),
        'carbon-grams': resp.get('statistics', {}).get('co2', {}).get('grid', {}).get('grams'),
        'full_resp': resp
    }
    return results

get_web_api.js

在浏览器中运行，但我也使用 Node.js 之类的东西得到相同的结果

const get_website_api = async (url) => {
    try {
        const response = await fetch(`https://api.websitecarbon.com/site?url=${url}`);
        if (!response.ok) {
            throw new Error(`HTTP error! Status: ${response.status}`);
        }
            const requirements = await response.json();
        } catch (error) {
        console.error('Error fetching API:', error.message);
    }
};

Python 成功返回

results

，而 javascript 返回此：

任何能够解释导致此问题的原因的人都将与解决方案一样受到赞赏。

Answer 1

您遇到了 CORS 浏览器限制。 CORS 代表跨源资源共享，是浏览器尝试使互联网更加安全的手段之一。

本质上，您的服务器没有指定应允许哪个源（意思是“域”）获取您的端点。 “告诉”客户端是否允许检索资源的方法是在服务器上设置 Access-Control-Allow-Origin 标头。

您设置的值将被浏览器解析并决定请求是可以还是被服务器限制。

例如，出于测试目的，您可以设置如下标头：Access-Control-Allow-Origin: *，这将允许每个域访问您的端点。如果您的应用程序已部署，您可以进一步限制它。

如果你使用 Flask 你可能应该有类似的东西

response.headers['Access-Control-Allow-Origin'] = '*'

在您的端点控制器中