ES6:从CORS fetch调用中检索响应头

基础概念

CORS（跨源资源共享）是一种机制，允许Web应用程序从不同的源（域）请求资源。Fetch API 是一个现代的、基于Promise的网络请求API，用于替代传统的XMLHttpRequest。

相关优势

1. 安全性：CORS通过预检请求（Preflight Request）确保跨域请求的安全性。
2. 灵活性：允许服务器明确指定哪些源可以访问其资源。
3. 兼容性：Fetch API 提供了更好的错误处理和更简洁的语法。

类型

• 简单请求：满足特定条件的请求（如GET、POST、HEAD方法，特定的HTTP头部）。
• 预检请求：不满足简单请求条件的请求会先发送一个OPTIONS请求进行预检。

应用场景

• 单页应用（SPA）：前端应用通常需要从不同的API服务器获取数据。
• 微服务架构：不同服务之间可能需要跨域通信。

示例代码

以下是一个使用Fetch API进行CORS请求并检索响应头的示例：

fetch('https://api.example.com/data', {
    method: 'GET',
    mode: 'cors', // 确保请求是CORS模式
    headers: {
        'Content-Type': 'application/json'
    }
})
.then(response => {
    // 检查响应是否成功
    if (!response.ok) {
        throw new Error('Network response was not ok ' + response.statusText);
    }
    // 获取所有响应头
    const headers = response.headers;
    console.log(headers);

    // 获取特定响应头
    const contentType = headers.get('content-type');
    console.log(contentType);

    // 解析响应体为JSON
    return response.json();
})
.then(data => {
    console.log(data);
})
.catch(error => {
    console.error('There has been a problem with your fetch operation:', error);
});

可能遇到的问题及解决方法

问题1：CORS错误

原因：服务器没有正确设置CORS头部，或者请求的源不在允许的列表中。

解决方法：

• 确保服务器端设置了正确的Access-Control-Allow-Origin头部。
• 如果需要允许所有源，可以使用通配符*，但不推荐在生产环境中使用。

问题2：无法获取某些响应头

原因：默认情况下，浏览器只允许获取简单的响应头（如Content-Type），其他自定义头部需要服务器明确允许。

解决方法：

• 服务器端设置Access-Control-Expose-Headers头部，列出允许前端访问的自定义头部。

例如，在服务器端设置：

res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Expose-Headers', 'X-Custom-Header');

这样前端就可以通过response.headers.get('X-Custom-Header')获取到自定义头部。

总结

通过理解CORS和Fetch API的基础概念及其应用场景，可以有效地处理跨域请求并正确检索响应头。遇到问题时，检查服务器端的CORS设置和响应头配置是关键。