为我的代码遇到CORS（跨源资源共享）头缺失的错误

Question

由于CORS策略限制，从源 'http://localhost:3000' 访问 XMLHttpRequest 请求 'https://api.coingecko.com/api/v3/coins/markets?vs_currency=INR&order=market_cap_desc&per_page=100&page=1&sparkline=false' 被阻止。请求资源上缺少 'Access-Control-Allow-Origin' 头部。

以下是你的代码：

import axios from 'axios';
import React, { useEffect, useState } from 'react';
import { CoinList } from '../config/api';
import { CrytpoState } from '../CryptoContext';
import { Container, LinearProgress, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, TextField, ThemeProvider, Typography, createTheme, makeStyles } from '@material-ui/core';
import { useNavigate } from "react-router-dom";

const CoinsTable = () => {
  const [coins, setCoins] = useState([]);
  const [loading, setLoading] = useState(false);
  const [search, setSearch] = useState("");
  const navigate = useNavigate();

  const { currency } = CrytpoState();

  const fetchCoins = async () => {
    setLoading(true);
    try {
      const { data } = await axios.get(CoinList(currency), { crossDomain: true });
      setCoins(data);
    } catch (error) {
      console.error("Error fetching coins:", error);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchCoins();
  }, [currency]);

  // 创建深色主题样式
  const darkTheme = createTheme({
    palette: {
      primary: {
        main: "#fff",
      },
      type: "dark",
    },
  });

  // 搜索处理函数
  const handleSearch = () => {
    return coins.filter(
      (coin) =>
        coin.name.toLowerCase().includes(search.toLowerCase()) ||
        coin.symbol.toLowerCase().includes(search.toLowerCase())
    );
  };

  const useStyles = makeStyles(() => ({
    row: {},
  }));
  const classes = useStyles();

  return (
    
      {/* 页面内容 */}
    
  );
};

// 由于跨域问题，我无法直接解决，但通常来说，你需要确保API服务器允许来自'http://localhost:3000'的请求。这通常通过在服务器端配置'Access-Control-Allow-Origin'头部来实现。

任何帮助都将不胜感激，因为我目前无法解决这个CORS头部缺失的问题。

Tomalak · Answer

这意味着“coingecko”可能关闭了CORS头设置，这可能是因为你在没有事先沟通的情况下，在你的网站中嵌入了对第三方API的调用。

Vlad Bezden · Answer

CORS是一种浏览器端的安全机制。当你的浏览器尝试发起“fetch”或“axios”请求时，它首先会向最终将要发起GET/POST/PUT等请求的URL发送一个OPTIONS预检请求。

浏览器会查看来自OPTIONS请求的响应头信息。服务器正是通过这种方式告诉浏览器“从以下站点进行fetch操作是安全的：……”。换句话说，“从以下来源的网页调用本服务器的API是安全的：……”。这种机制使得服务器能够告知浏览器哪些站点或页面可以安全地调用其API。

例如，银行服务器可能会设置只能从银行官方网站（如https://mybank.com）调用API。如果有人在其他地址（比如https://myfakebank.com）上搭建了一个网页并试图调用银行的API服务器，那么浏览器将会抛出CORS错误，因为这个伪造的网页并非来自“有效”的网站。

因此，在你的情况中，你需要在浏览器开发者工具的网络面板中查看对该API调用的OPTIONS请求的响应头，看看在“输入错误凭据”的情况下是否返回了适当的响应（即Access-Control-Allow-Origin *）。如果你尝试调用API的网页不在允许的源列表中，那么为了自身的（也是用户的）安全，浏览器将不会发起API调用。

Laurenz Albe · Answer

你尝试从 http://localhost:3000 访问位于https://api.coingecko.com/ 的资源，这两个地址处于不同的域名/源（一个在coingecko.com服务器上，另一个是本地开发环境的localhost）。

CORS 是什么？

CORS 代表跨域资源共享。

这是什么意思？

出于安全原因，浏览器会限制由脚本发起的跨源HTTP请求。例如，fetch() 和 XMLHttpRequest 遵循同源策略。这意味着使用这些API的Web应用只能请求来自与应用加载源相同的资源，除非其他源的响应包含了正确的CORS头信息（来源)。

如果你是一个团队中的前端开发者，并且有独立的后端团队，你需要向他们请求将 http://localhost:3000 添加到服务器的白名单源列表中。一旦他们在后端完成设置，你就能成功地从本地发起请求。

如果你同时负责后端代码，那么你可以直接将 http://localhost:3000 添加到服务器的白名单域名中。

PS - 你可以在互联网上查找多个关于如何在特定服务器上添加白名单域名的资源。

希望这对你有所帮助。