Postman调用牛津词典API正常，JavaScript Fetch请求失败求助

我来帮你排查下这个问题！你在Postman里能正常拿到响应，但JavaScript Fetch请求却不行，大概率是这几个原因导致的：

1. 请求头缺失关键的app_key参数 #

看你贴的代码，请求头里只包含了Accept和app_id，但牛津词典API要求必须同时传入app_id和app_key才能通过身份验证——Postman里你肯定是配置了这两个参数的对吧？赶紧把app_key补到Fetch的headers里：

const url = 'https://api.oxforddictionaries.com:443/api/v1/entries/en/';
let searchString = 'word';
fetch(url + searchString, {
  method: 'GET',
  headers: {
    "Accept": "application/json",
    "app_id": "vb805en4", // 填入你的真实app_id
    "app_key": "bmd3a11b2951277c3a04ddbbnaec0216" // 补上这个必填的密钥头
  }
})
.then(response => {
  // 先检查响应状态码，方便排查错误
  if (!response.ok) {
    throw new Error(`请求失败，状态码：${response.status}`);
  }
  return response.json();
})
.then(data => console.log('获取到的词典数据：', data))
.catch(error => console.error('Fetch请求出错：', error));

2. 浏览器的CORS跨域限制问题 #

Postman是后端调试工具，不受浏览器的CORS（跨域资源共享）政策约束，但你的Fetch请求是在浏览器环境中运行的，就会触发CORS检查。如果牛津词典API没有配置允许你当前域名的跨域请求，浏览器就会直接拦截响应。

针对这个问题，有几个解决方向：

• 本地开发调试：可以使用浏览器插件临时禁用CORS（比如Chrome的「Allow CORS: Access-Control-Allow-Origin」），但这只适合开发阶段，线上环境不能用。
• 前端项目代理：如果是React、Vue这类框架的项目，可以配置本地代理，把API请求转发到牛津服务器，绕过CORS限制。比如在Vue的vue.config.js里配置代理，React在package.json里加proxy字段。
• 线上生产方案：自己搭建一个后端服务，由后端去调用牛津词典API，前端再请求自己的后端接口。这样就完全避开了浏览器的CORS限制，同时还能保护你的app_key不暴露在前端代码里（毕竟把密钥写在前端是很不安全的！）

3. 额外检查：URL拼接是否正确 #

虽然你拼接后的URL看起来和Postman里的一致，但还是要确认下有没有多余的斜杠或者拼写错误。比如url末尾的/加上searchString后，是否是https://api.oxforddictionaries.com:443/api/v1/entries/en/word，和Postman里的请求URL完全匹配。

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