NUXT/VUE中使用$fetch()无法添加自定义Authorization头发送GET请求

原因分析 #

这种情况是浏览器跨域资源共享（CORS）限制导致的：当跨域请求包含自定义请求头（比如Authorization）时，浏览器会先发送一个OPTIONS预检请求，只有服务器明确允许该自定义头，浏览器才会在后续的实际请求中带上它。而你能修改Accept-Language这类头，是因为它们属于浏览器默认允许的请求头，不需要触发预检。

解决方案 #

1. 服务器端配置CORS #

必须在服务器的CORS配置中，将Authorization添加到允许的请求头列表里，同时确保相关配置正确：

• 示例（Node.js/Express环境，使用cors中间件）：

  const cors = require('cors');
  app.use(cors({
    origin: '你的前端应用域名', // 比如http://localhost:3000
    allowedHeaders: ['Authorization', 'Accept-Language'], // 明确允许自定义头
    methods: ['GET', 'OPTIONS'] // 允许GET和预检的OPTIONS方法
  }));
  

• 其他后端框架（如Java Spring、Python Django）也需要对应配置Access-Control-Allow-Headers，将Authorization纳入其中。

2. 确保服务器正确响应OPTIONS预检请求 #

服务器需要处理OPTIONS请求，返回包含Access-Control-Allow-Headers、Access-Control-Allow-Methods、Access-Control-Allow-Origin的响应头，否则浏览器会拦截后续的GET请求，不会带上自定义头。

3. 优化前端$fetch代码（可选） #

你的代码写法本身无错误，但可以调整为更简洁的async/await写法，同时根据需求配置credentials：

async function getArticles(){
    try {
        const response = await $fetch(`${BASE_URL}api/article/`, {
            headers: {
                "Accept-Language": "TEST IF IT CHANGE",
                "Authorization": "REQUEST_TOKEN"
            },
            method: 'GET',
            credentials: 'include' // 若需要携带Cookie，添加此配置
        });
        console.log(response);
    } catch(e) {
        console.error('请求失败:', e);
    }
}

内容的提问来源于stack exchange，提问作者michael-mb