被CORS阻止，没有‘访问-控制-允许-起源’头-不工作在react/axios中，但是在python/请求中工作很好。

Question

下面的python请求正在使用私有API键从付费API中获取数据，并且提取工作正常：

import requests

api_key = 'our_private_api_key'
headers = { 'x-api-key': api_key }
params = {}
endpoint = 'our_api_endpoint_url'
resp: dict = requests.get(endpoint, headers=_headers_builder(headers), params=params).json().get('response', {})
resp_data = resp.get('data', None)

当使用axios在Javascript (React )中本地获取时，我们尝试使用类似的代码，但在JavaScript中(借助react query的useQuery)：

import { useQuery } from 'react-query';
import axios from 'axios'

async function fetchLiveData() {
    const api_key = 'our_private_api_key';
    const endpoint = 'our_api_endpoint_url';
    const { data } = await axios.get(endpoint, { headers: { 'x-api-key': api_key } });
    return data;
}

const { data, error, isError, isLoading: isLoading25 } = useQuery('posts', fetchLiveData);

从这个...however中抛出以下错误。

Access to XMLHttpRequest at 'endpoint' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

这是一个本地主机问题，还是axios获取中遗漏了一些参数，或者是API提供程序的权限问题？还是别的什么？我们如何着手解决这个问题？

Answer 1

我猜python在浏览器之外，浏览器阻止原始请求，客户端代码没有任何事可做，API负责处理这个问题，方法是添加一个http报头“访问-控制-允许-原产地: YOUR_DOMAIN或*”，您说这是一个付费的API，您不能处理这个问题，所以我假设他们有一个控制台仪表板，我认为在他们的设置中可以配置(白名单)接受的源，在那里您可以添加您的源、本地主机或允许所有的源。

Answer 2

尝试在axios头中添加'Access-Control-Allow-Origin': '*',。在当地，它应该起作用。祝好运!