使用HTTPS GET请求调用PokéAPI时遭遇JSON解析异常

我通过HTTPS GET请求调用https://pokeapi.co/api/v2/pokemon接口，想获取JSON数据并在控制台输出，但请求失败，控制台报错：No 'Access-Control-Allow-Origin' header is present on the requested resource。

我的代码如下：

fetch('https://pokeapi.co/api/v2/pokemon')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(err => console.log(err));

1. 确认请求模式（前端浏览器环境） #

PokéAPI本身支持CORS，直接发起GET请求应该可以正常访问。可以显式指定请求的mode为cors，确保浏览器使用跨域模式：

fetch('https://pokeapi.co/api/v2/pokemon', {
  method: 'GET',
  mode: 'cors'
})
.then(res => res.json())
.then(console.log)
.catch(console.error);

2. 使用代理绕过跨域限制 #

如果浏览器环境下依然存在跨域问题，可通过本地代理服务器转发请求。比如用Node.js+Express搭建简单代理：

// 代理服务器代码
const express = require('express');
const fetch = require('node-fetch');
const app = express();

app.get('/proxy/pokemon', async (req, res) => {
  try {
    const apiRes = await fetch('https://pokeapi.co/api/v2/pokemon');
    const data = await apiRes.json();
    res.send(data);
  } catch (err) {
    res.status(500).send({ error: err.message });
  }
});

app.listen(3000, () => console.log('代理服务启动在 http://localhost:3000'));

之后前端请求代理地址：

fetch('http://localhost:3000/proxy/pokemon')
.then(res => res.json())
.then(console.log)
.catch(console.error);

3. 排查网络干扰 #

检查是否有浏览器插件（如广告拦截器）、防火墙或VPN拦截了请求，尝试禁用相关插件或切换网络环境后重试。

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