解决React中Fetch API与CORS认证问题：正确配置请求头

本文旨在解决react应用中使用fetch api进行跨域请求时遇到的cors策略问题，尤其是在涉及认证令牌时。文章将深入分析常见的错误配置，如`mode`属性的错误放置和认证请求头的拼写错误，并提供一套规范的解决方案，确保您的react应用能够顺利与外部api进行带认证的交互。

理解CORS与Fetch API中的认证挑战

跨域资源共享（CORS）是浏览器的一项安全功能，旨在防止恶意网站在未经许可的情况下访问其他域的资源。当您的React应用（通常运行在http://localhost:3000）尝试从不同域（如https://api.airtable.com）的API获取数据时，浏览器会执行CORS检查。

在涉及认证令牌（如Bearer Token）的请求中，CORS问题尤为常见，因为这类请求通常会触发一个“预检请求”（Preflight Request）。预检请求是一个OPTIONS请求，浏览器在发送实际请求之前，会先向服务器询问是否允许该跨域请求以及允许哪些HTTP方法和请求头。如果服务器在预检响应中没有明确允许特定的请求头（例如Authorization），浏览器就会阻止实际请求，并抛出Access-Control-Allow-Headers相关的CORS错误。

常见的错误信息如下：

Access to fetch at 'https://api.airtable.com/{my_data_base}' from origin 
'http://localhost:3000' has been blocked by CORS policy: Request header
field authentication is not allowed by Access-Control-Allow-Headers in
preflight response.

这个错误明确指出，预检响应中不允许名为authentication的请求头。

常见错误分析与纠正

在React组件中使用fetch进行API调用时，开发者可能会因对fetch选项和HTTP请求头的不熟悉而引入错误。以下是两个最常见的错误：

1. mode属性的错误放置

mode属性是fetch请求的选项之一，它定义了请求的模式，例如cors（默认）、no-cors和same-origin。它应该直接作为fetch的第二个参数对象的一个顶级属性，而不是嵌套在headers对象内部。

错误示例：

fetch('https://api.airtable.com/v0/my_data_base', {
    headers: {
        mode: 'no-cors', // 错误：mode不属于headers
        Authentication: 'Bearer my_token',
    },
})

纠正： mode应该与headers平级。 此外，mode: 'no-cors'通常不适用于需要认证的请求。当使用no-cors模式时，浏览器会限制JavaScript对响应的访问，例如无法读取响应体，也无法检查响应状态码。对于需要处理认证失败或成功响应的场景，应使用默认的cors模式，并确保服务器正确配置了CORS策略。如果服务器未配置CORS，no-cors模式也无法解决Access-Control-Allow-Headers这类预检请求错误。

2. 认证请求头名称拼写错误

HTTP协议标准中用于传递认证令牌的请求头是Authorization，而不是Authentication。这是一个常见的拼写错误，会导致服务器无法识别并处理您的认证信息。

AI建筑知识问答

用人工智能ChatGPT帮你解答所有建筑问题

22

查看详情

错误示例：

fetch('https://api.airtable.com/v0/my_data_base', {
    headers: {
        Authentication: 'Bearer my_token', // 错误：应为Authorization
    },
})

纠正： 将Authentication改为Authorization。

规范的Fetch API认证请求实现

结合上述纠正，一个正确且规范的React fetch认证请求应如下所示：

import { FC, useEffect } from 'react';

const Collection: FC = () => {
    useEffect(() => {
        const fetchData = async () => {
            try {
                const response = await fetch('https://api.airtable.com/v0/my_data_base', {
                    method: 'GET', // 根据API要求设置，默认为GET
                    headers: {
                        // 正确的认证请求头名称
                        'Authorization': 'Bearer my_token', 
                        // 其他可能需要的请求头，例如Content-Type
                        'Content-Type': 'application/json' 
                    },
                    // mode属性通常不需要显式设置，默认为'cors'
                    // 如果API服务器支持CORS，则无需设置no-cors
                });

                if (!response.ok) {
                    // 处理HTTP错误，例如401 Unauthorized
                    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('Error fetching data:', error);
            }
        };

        fetchData();
    }, []); // 空数组表示只在组件挂载时执行一次

    return <div>Collection Page Component</div>;
};

export default Collection;

代码解释：

• useEffect hook: 用于在组件挂载后执行副作用，这里是数据获取。
• fetch选项对象：
  • method: 'GET'：指定HTTP方法。
  • headers: { 'Authorization': 'Bearer my_token', 'Content-Type': 'application/json' }：这是关键的修正。
    • 'Authorization'是正确的请求头名称，用于传递Bearer Token。
    • 'Bearer my_token'是令牌的格式，其中my_token应替换为您的实际认证令牌。
    • 'Content-Type'根据API要求添加，对于JSON API通常是application/json。
  • mode属性被省略：默认的'cors'模式是处理跨域请求的标准方式，它允许浏览器执行预检请求并处理服务器的CORS响应。
• 错误处理： 添加了if (!response.ok)检查，以便更好地处理非2xx的HTTP响应，并使用try...catch块捕获网络或其他潜在错误。

注意事项与进一步排查

1. 服务器CORS配置： 即使前端代码正确，如果API服务器没有正确配置CORS，仍然会遇到问题。服务器必须在响应头中包含Access-Control-Allow-Origin（允许您的前端域）、Access-Control-Allow-Methods（允许GET, POST等）和Access-Control-Allow-Headers（明确允许Authorization等自定义请求头）。如果您是API的开发者，请检查并配置服务器。
2. 开发环境代理： 在开发React应用时，可以使用开发服务器的代理功能来规避CORS问题。例如，在Create React App项目中，可以在package.json中添加"proxy": "https://api.airtable.com"，这样所有对/api的请求都会被转发到目标API，从而避免跨域。
3. 令牌安全性： 将认证令牌直接硬编码在前端代码中是非常不安全的做法。在实际应用中，令牌应通过安全的方式获取和管理，例如从用户登录后存储在localStorage或sessionStorage中（但仍需注意XSS风险），或者通过HTTP Only的Cookie传递。
4. 浏览器扩展： 尽管浏览器扩展可以暂时绕过CORS限制以进行调试，但它们绝不是生产环境的解决方案，也不应依赖它们来解决根本问题。

总结

解决React中Fetch API的CORS认证问题，核心在于理解CORS机制和正确配置fetch请求选项。关键的修正包括：

1. 确保Authorization是用于传递认证令牌的正确请求头名称。
2. 避免将mode属性错误地放置在headers对象内部，并且对于需要认证的请求，通常不需要显式设置mode: 'no-cors'。
3. 始终检查并确保后端API服务器正确配置了CORS策略，允许您的前端域和必要的请求头。

通过遵循这些最佳实践，您可以有效地解决fetch API在React应用中遇到的CORS认证问题，确保数据请求的顺利进行。

以上就是解决React中Fetch API与CORS认证问题：正确配置请求头的详细内容，更多请关注php中文网其它相关文章！