使用JavaScript fetch方法时遭遇“null被CORS策略拦截”错误求助

核心问题 #

你在请求头里加Access-Control-Allow-Origin: *完全没用——这个是服务器返回给浏览器的响应头，不是前端发的请求头。浏览器报CORS错，本质是目标API服务器没有在响应里返回允许你当前域名（这里是null，说明你是本地直接打开HTML文件，属于file://协议）访问的Access-Control-Allow-Origin头，所以浏览器拦截了响应。

Postman能正常请求是因为它是客户端工具，不受浏览器同源策略的限制。

可行解决办法 #

1. 用后端代理请求（推荐）

浏览器的同源策略只限制前端直接请求，后端请求不受限制。你可以自己写一个简单的后端接口，让后端帮你请求足球API，再把结果返回给前端。

比如用Node.js写个简易代理示例：

// 基于Express的示例
const express = require('express');
const fetch = require('node-fetch');
const app = express();

app.get('/api/standings', async (req, res) => {
  try {
    const response = await fetch('http://api.football-data.org/v4/competitions/PL/standings', {
      headers: {
        'X-Auth-Token': '你的api_key'
      }
    });
    const data = await response.json();
    res.json(data);
  } catch (err) {
    res.status(500).json({ error: err.message });
  }
});

app.listen(3000, () => console.log('代理服务运行在3000端口'));

之后前端请求自己的代理接口：

fetch('http://localhost:3000/api/standings')
  .then(response => response.json())
  .then(text => console.log(text))
  .catch(err => console.error(err));

2. 临时使用no-cors模式（仅适合不需要读取响应内容的场景）

如果你的需求只是发送请求（比如缓存资源），不需要解析返回的JSON数据，可以给fetch加mode: 'no-cors'，但此时响应是无法读取内容的透明响应：

fetch('http://api.football-data.org/v4/competitions/PL/standings', {
  headers: {
    'X-Auth-Token': '你的api_key'
  },
  mode: 'no-cors'
})
.then(response => {
  console.log('请求已发送，但无法获取响应内容');
});

3. 检查API是否支持浏览器端访问

部分API会提供专门的前端友好端点，或者允许在控制台配置允许访问的域名。你可以查看足球API的官方文档，看看有没有CORS相关的配置说明，比如把你的域名添加到API的白名单中。

修正你的原代码（移除错误请求头） #

不管用哪种方案，原代码里的'Access-Control-Allow-Origin':'*'都要删掉，这个头不属于请求头范畴：

fetch('http://api.football-data.org/v4/competitions/PL/standings', {
  headers: {
    'X-Auth-Token': '你的api_key'
    // 移除Access-Control-Allow-Origin
  }
})
.then(response => response.json())
.then(text => console.log(text))
.catch(err => console.error(err));

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