牛津词典API请求无法传递授权头问题求助

看起来你遇到的核心问题是**mode: 'no-cors'限制了自定义请求头的发送**。当你使用no-cors模式时，浏览器会严格限制能发送的请求头——只能包含Accept、Accept-Language、Content-Language和Content-Type（且值只能是application/x-www-form-urlencoded、multipart/form-data或text/plain），你的app_id和app_key这类自定义头会被浏览器拦截，根本不会发送到API服务器。

接下来给你一步步的修复方案：

1. 移除mode: 'no-cors' #

首先删掉这个配置项，让浏览器默认使用cors模式。不过这里要注意：如果牛津词典API没有允许你的前端域名跨域，你可能会遇到CORS错误。这种情况下，你需要做一个后端代理（比如用Node.js、PHP等写一个简单的接口，前端请求自己的后端，后端再转发请求到牛津API并携带授权头），因为浏览器会阻止前端直接向不允许跨域的第三方API发送带自定义头的请求。

2. 修正API请求URL #

你的URL格式不对，牛津词典API v1的正确端点应该是类似https://od-api.oxforddictionaries.com/api/v1/entries/{language}/{word_id}（比如查英文单词的话是/api/v1/entries/en/{word}），而不是在根路径加word_id参数。错误的URL也会导致请求失败。

3. 正确构造请求头 #

可以直接用对象字面量来定义请求头，写法更简洁，也避免Headers构造可能出现的小问题。

修正后的代码示例 #

function testResults(form) {
  var TestVar = form.inputbox.value;
  alert("You typed: " + TestVar);
  
  // 修正后的API URL（以英文为例，根据你的需求替换语言代码）
  var url = `https://od-api.oxforddictionaries.com/api/v1/entries/en/${encodeURIComponent(TestVar)}`;
  
  fetch(url, {
    method: 'GET',
    // 移除no-cors模式
    headers: {
      'app_id': '你的实际app_id',
      'app_key': '你的实际app_key'
    }
  })
  .then(function(response) {
    // 先检查请求是否成功
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
    return response.json(); // 解析JSON响应
  })
  .then(function(data) {
    console.log("API响应数据:", data);
    // 在这里处理返回的词典数据
  })
  .catch(function(error) {
    console.error("请求出错:", error);
    // 处理错误情况，比如提示用户
  });
}

额外注意事项 #

• 如果你确实遇到了CORS错误，不要尝试绕开浏览器的CORS限制（比如安装插件），这在生产环境不可行。正确的做法是搭建后端代理：前端请求自己的服务器，服务器在后端调用牛津API（后端不受浏览器CORS限制），然后把结果返回给前端。
• 确认你的app_id和app_key是正确的，并且已经在牛津开发者平台激活了对应的API权限。

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