设置请求头后调用CoinGecko加密货币价格追踪API仍遭CORS策略阻止问题求助

首先得说，你现在的代码里有两个关键错误导致了CORS问题和后续的数据获取失败：

错误点分析 #

• 错误设置mode: 'no-cors'：这个模式会让浏览器禁止你读取响应内容（即使请求成功），而且它只适用于不需要处理响应的场景（比如加载图片），完全不适合你需要获取API数据的需求。
• 错误添加Access-Control-Allow-Origin请求头：这个头是服务器返回给浏览器的响应头，用来允许跨域请求，客户端发送这个头不仅没用，还可能干扰正常的请求流程。

另外，CoinGecko的公开API本身是支持CORS的，所以你根本不需要额外设置这些错误的配置。

修正后的代码 #

我帮你调整了代码，解决了CORS问题，同时修复了定时器内存泄漏的问题：

import React, { useEffect, useState } from 'react'
import axios from 'axios'
import './tracker.css'

function Tracker() {
  const [data, setData] = useState([])

  useEffect(() => {
    // 定义数据获取函数
    const fetchData = async () => {
      try {
        // 直接正常请求，不需要额外的mode或错误请求头
        const result = await axios('https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=100&page=1&sparkline=false')
        setData(result.data)
      } catch (err) {
        console.error('获取加密货币数据失败:', err)
      }
    }

    // 组件挂载时立即执行一次数据获取
    fetchData()
    // 设置定时器定期刷新数据（建议把间隔改成10秒，避免频繁请求被API限流）
    const intervalId = setInterval(fetchData, 10000)

    // 组件卸载时清除定时器，避免内存泄漏
    return () => clearInterval(intervalId)
  }, [])

  return (
    <div>
      <div className="tracker__names">
        <b>Coins</b>
        <b>Symbol</b>
        <b>Price</b>
        <b>Market Cap</b>
      </div>
      {data.map((coin) => (
        // 遍历列表必须加唯一key，符合React最佳实践
        <div key={coin.id} className="tracker__main">
          <div className="tracker__img">
            <img src={coin.image} className="tracker__image" alt={coin.name}/>
            <b>{coin.name}</b>
          </div>
          <div className="tracker__symbol">
            <p>{coin.symbol.toUpperCase()}</p>
          </div>
          <div className="tracker__price">
            ${coin.current_price.toLocaleString()}
          </div>
          <div className="tracker__market">
            ${coin.market_cap.toLocaleString()}
          </div>
        </div>
      ))}
    </div>
  )
}

export default Tracker

额外优化点说明 #

1. 添加错误捕获：用try/catch处理请求失败的情况，方便你排查后续可能出现的问题。
2. 修复内存泄漏：在useEffect的返回函数里清除定时器，避免组件卸载后还继续发起无效请求。
3. 调整请求间隔：把1秒改成10秒，因为CoinGecko的API有请求频率限制，过于频繁的请求可能会被限流甚至封禁。
4. 优化显示效果：用toLocaleString()让价格和市值的数字格式更易读。
5. 补充必要属性：给图片加alt文本，给列表项加key，符合React的开发规范。

内容的提问来源于stack exchange，提问作者Chen