React使用Axios调用牛津词典API被CORS拦截如何永久解决

你遇到的CORS报错是因为牛津词典API本身不允许前端跨域直接调用，CORS是服务端控制的安全策略，前端无法自行绕过。你当前代码里的两处错误也加剧了请求失败：

1. 你在请求头里添加的所有Access-Control-Allow-*头都是服务端需要返回给浏览器的响应头，前端请求时携带这些头不仅没用，还会导致浏览器触发非简单请求的预检OPTIONS校验，牛津API不处理OPTIONS请求，直接返回错误导致预检不通过。
2. 牛津API的身份认证头配置错误，官方要求携带app_id和app_key两个独立请求头，你把app_id放到Authorization头的写法不符合接口要求。

永久解决方案 #

方案1：自建后端代理层（最推荐，生产环境可用） #

这是最稳定的永久方案，核心逻辑是前端不直接调用牛津API，转而请求你自己的后端接口，由后端转发请求到牛津API：

• 后端服务之间的请求不存在CORS限制，不会触发跨域校验
• 还可以避免把你的app_key明文暴露在前端代码里，防止密钥被盗用

Node.js Express 简单代理示例：

const express = require('express');
const axios = require('axios');
const app = express();
const PORT = 3001;

app.get('/api/dictionary/:word', async (req, res) => {
  // 允许前端跨域调用你这个接口
  res.header('Access-Control-Allow-Origin', '*');
  try {
    const result = await axios.get(`https://od-api.oxforddictionaries.com/api/v2/entries/en-us/${req.params.word}`, {
      headers: {
        'app_id': '替换为你的app_id',
        'app_key': '替换为你的app_key'
      }
    });
    res.json(result.data);
  } catch (err) {
    res.status(err.response?.status || 500).json(err.response?.data || {msg: '请求失败'});
  }
});

app.listen(PORT, () => console.log(`代理服务运行在端口${PORT}`));

前端把请求地址改成http://localhost:3001/api/dictionary/flower即可，不需要额外加任何CORS相关的请求头。

方案2：开发环境用脚手架内置代理 #

如果仅需要本地开发调试，不需要部署到生产，可以直接用前端脚手架的代理配置，不需要额外搭服务：

• Vite项目在vite.config.js里配置proxy字段
• Create React App项目在package.json里加"proxy": "https://od-api.oxforddictionaries.com"
  配置后前端直接请求/api/v2/entries/en-us/flower即可，脚手架会自动把请求转发到牛津API，开发环境不会有CORS问题。

方案3：自建私有CORS Anywhere服务 #

你之前用的公共CORS Anywhere有次数限制，你可以自己部署一个私有的CORS代理服务，没有调用次数限制，部署成本很低，直接用官方开源的镜像一键部署即可。

修正后的前端请求代码示例：

import { useState, useEffect } from "react";
import axios from 'axios';
function App() {
  const [word, setWord] = useState("");
  const [meanings, setMeanings] = useState([]);
  const [category, setCategory] = useState("en");

  const dictionaryApi = async () => {
    try {
      // 换成你自己的代理接口地址
      const data = await axios.get(`http://localhost:3001/api/dictionary/flower`);
      setMeanings(data.data);
    } catch (error) {
      console.log(error);
    }
  };
  console.log(meanings);

  useEffect(() => {
    dictionaryApi();
  }, [word, category]);

  return <>HELLO</>;
}
export default App;

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