本文旨在解决react应用中使用fetch api进行跨域请求时遇到的cors授权策略问题，特别是由于请求头配置不当（如使用了错误的授权头名称或不当的`mode`属性）导致的预检请求失败。我们将详细解析常见错误，并提供正确的`authorization`头配置方法及`fetch`选项的最佳实践，确保您的跨域请求能够顺利通过cors验证。
理解CORS与预检请求
跨域资源共享（CORS）是一种安全机制，它允许浏览器在特定条件下向不同源的服务器发起请求。当浏览器检测到跨域请求，并且该请求可能对服务器产生副作用（例如，使用了PUT、DELETE等HTTP方法，或包含了某些非简单请求头，如自定义头或Authorization头），它会先发送一个“预检请求”（OPTIONS请求）。
预检请求的目的是询问服务器，当前源是否允许使用特定的HTTP方法和请求头访问资源。服务器通过响应头（如Access-Control-Allow-Origin、Access-Control-Allow-Methods、Access-Control-Allow-Headers）告知浏览器其CORS策略。如果服务器的响应不允许请求中包含的特定头部，浏览器就会阻止实际请求的发送，并抛出CORS错误，例如“Request header field authentication is not allowed by Access-Control-Allow-Headers in preflight response”。
常见错误分析
在React应用中使用fetch API进行带授权信息的跨域请求时，开发者常犯以下两个错误，导致CORS预检请求失败：
错误的授权头名称：Authentication vs. Authorization HTTP协议标准规定，用于传递认证凭证的请求头是Authorization，而不是Authentication。Authentication通常用于服务器在响应中提示客户端需要进行认证。当客户端使用Authentication作为请求头发送令牌时，服务器可能无法识别或在CORS策略中未将其列为允许的头部，从而导致预检请求失败。
-
mode: 'no-cors' 的不当使用和位置错误mode属性用于控制请求的CORS模式。
- 'cors' (默认值): 遵循CORS策略，会触发预检请求。
- 'no-cors': 允许发送跨域请求，但浏览器不会检查CORS策略，也不会暴露响应内容给JavaScript（响应的type会是opaque）。这主要用于发送一些“简单请求”，但无法读取响应。对于需要发送授权头并处理响应的场景，'no-cors'模式是无效的，因为它不会让授权头通过CORS验证，并且即使请求成功，您也无法访问响应数据。
- 'same-origin': 只允许同源请求。
此外，mode属性应该作为fetch请求选项对象的一个顶级属性，与headers同级，而不是嵌套在headers对象内部。将其放置在headers对象内是错误的语法，会导致fetch API无法正确解析。
正确的Fetch API授权请求配置
要正确地在React中使用fetch API发送带授权信息的跨域请求，需要遵循以下修正：
使用正确的授权头：Authorization 始终使用Authorization头来传递Bearer Token或其他认证凭证。
正确配置mode属性（或省略） 对于需要发送自定义头（如Authorization）并处理响应的跨域请求，应使用默认的'cors'模式（或不显式设置mode，因为它是默认值）。切勿使用'no-cors'，因为它会阻止浏览器处理CORS响应头，导致无法访问响应内容。
以下是修正后的React组件代码示例：
import { FC, useEffect } from 'react';
const Collection: FC = () => {
useEffect(() => {
const fetchCollectionData = async () => {
try {
const response = await fetch('https://api.airtable.com/v0/my_data_base', {
method: 'GET', // 显式指定HTTP方法，如果默认是GET可以省略
headers: {
// 1. 使用正确的授权头名称：Authorization
Authorization: 'Bearer my_token',
// 2. Content-Type等其他必要头
'Content-Type': 'application/json',
},
// 3. mode属性应与headers同级，且对于带授权的跨域请求通常不需要显式设置为'cors'，因为它是默认行为。
// 如果服务器配置正确，这里可以省略mode。
// mode: 'cors', // 显式设置为'cors'，或直接省略
});
if (!response.ok) {
// 处理HTTP错误，例如401 Unauthorized, 403 Forbidden等
const errorData = await response.json();
throw new Error(`HTTP error! Status: ${response.status}, Message: ${errorData.message || 'Unknown error'}`);
}
const data = await response.json();
console.log(data);
} catch (error) {
console.error('Failed to fetch collection data:', error);
// 可以在这里添加用户友好的错误提示
}
};
fetchCollectionData();
}, []);
return Collection Page Component;
};
export default Collection;代码说明：
- Authorization: 'Bearer my_token'：这是正确传递Bearer Token的方式。请将my_token替换为您的实际API令牌。
- mode: 'cors'：此行可以省略，因为'cors'是fetch API的默认模式。如果您的服务器正确配置了CORS，浏览器将正常发送预检请求并处理响应。
- 错误处理：添加了try...catch块和response.ok检查，以更好地处理网络请求中可能出现的错误，包括CORS相关的拒绝。
注意事项与最佳实践
-
服务器端CORS配置至关重要： 即使客户端代码完全正确，如果目标API服务器没有正确配置CORS响应头（特别是Access-Control-Allow-Origin和Access-Control-Allow-Headers），CORS错误仍然会发生。请确保服务器允许您的前端应用的源（例如http://localhost:3000）以及Authorization请求头。
- Access-Control-Allow-Origin: 必须包含您的前端域名。
- Access-Control-Allow-Headers: 必须包含Authorization。
- Access-Control-Allow-Methods: 必须包含您使用的HTTP方法（如GET, POST, OPTIONS）。
避免使用'no-cors'模式处理授权请求： no-cors模式旨在发送不带凭证的简单请求，并且会阻止JavaScript访问响应。它不是解决CORS授权问题的方案。
使用async/await简化异步代码： 结合async/await可以使异步请求的代码更易读、更易于管理错误。
令牌管理： 在实际应用中，my_token不应硬编码在代码中，而应从安全的地方获取，例如环境变量、用户登录后的响应或认证服务。
总结
解决React中fetch API的CORS授权问题，关键在于理解CORS机制，并正确配置请求头。核心要点包括：使用标准的Authorization请求头传递认证令牌，并避免将mode: 'no-cors'用于需要授权和响应数据访问的请求。同时，确保后端API服务器的CORS策略配置正确，是保障跨域请求成功的根本。通过遵循这些指导原则，您可以有效地处理跨域授权请求，确保应用的稳定性和安全性。
