ReactJS 中 CORS 错误的处理
跨域资源共享 (CORS) 是浏览器实现的一项安全功能，旨在防止网页向与自身域名不同的域名发出请求。虽然这项安全措施可以保护用户免受恶意网站的侵害，但有时也会给在 ReactJS 应用中使用 API 的开发者带来问题。本文将探讨 CORS 的概念、CORS 错误发生的原因以及如何在 ReactJS 项目中处理这些错误。
什么是 CORS？
CORS 代表跨域资源共享。它允许 Web 应用程序向其所在域以外的其他域发出请求。例如，如果您的 React 应用程序运行在 A 域上http://localhost:3000，并且需要从运行在 B 域上的 API 获取数据http://api.example.com，则必须在服务器上正确配置 CORS 以允许此跨域请求。
为什么会出现 CORS 错误
当服务器未在响应中包含正确的标头以允许浏览器从不同来源发出请求时，就会发生 CORS 错误。浏览器会阻止该请求，并且您会在控制台中看到类似如下的错误信息：
Access to fetch at 'http://api.example.com/data' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
如何处理 CORS 错误
1. 修改服务器以允许 CORS
最直接的解决方案是配置服务器以允许跨域请求。以下是一些常用服务器框架的配置方法：
Express.js（Node.js）
const express = require('express');
const cors = require('cors');
const app = express();
app.use(cors());
app.get('/data', (req, res) => {
res.json({ message: 'Hello from the server!' });
});
app.listen(3001, () => {
console.log('Server is running on port 3001');
});
2. 在开发中使用代理
在开发 React 应用时，您可以配置代理将 API 调用重定向到目标服务器。这样可以避免开发过程中出现 CORS 问题。
创建 React 应用
package.json如果您使用的是 Create React App，则可以在您的 .js 文件或 .js文件中设置代理vite.config.js：
{
"proxy": "http://api.example.com"
}
3. 使用 CORS Anywhere
CORS Anywhere 是一个 NodeJS 代理，它会在代理请求中添加 CORS 标头。它有助于在开发过程中快速解决问题。
用法
const fetchData = async () => {
const response = await fetch('https://cors-anywhere.herokuapp.com/http://api.example.com/data');
const data = await response.json();
console.log(data);
};
fetchData();
4. 在浏览器中手动添加 CORS 标头
作为最后的手段，并且仅用于开发或测试，您可以禁用浏览器中的 CORS 或使用允许您绕过 CORS 的浏览器扩展程序。但是，由于存在安全风险，不建议在生产环境中使用这种方法。
示例：在 React 应用中处理 CORS
以下是一个使用 Express.js 服务器和 React 前端的实际示例。
Express.js 服务器设置
// server.js
const express = require('express');
const cors = require('cors');
const app = express();
app.use(cors());
app.get('/data', (req, res) => {
res.json({ message: 'Hello from the server!' });
});
app.listen(3001, () => {
console.log('Server is running on port 3001');
});
React 应用设置
使用 Fetch API 获取数据
// App.js
import React, { useEffect, useState } from 'react';
function App() {
const [data, setData] = useState(null);
useEffect(() => {
fetch('http://localhost:3001/data')
.then(response => response.json())
.then(data => setData(data))
.catch(error => console.error('Error:', error));
}, []);
return (
<div className="App">
<h1>{data ? data.message : 'Loading...'}</h1>
</div>
);
}
export default App;
在 Create React App 中使用代理
在您的package.json文件中，添加代理配置：
{
"proxy": "http://localhost:3001"
}
通过这种设置，您可以在开发过程中轻松获取数据，而无需担心 CORS 问题：
// App.js
useEffect(() => {
fetch('/data')
.then(response => response.json())
.then(data => setData(data))
.catch(error => console.error('Error:', error));
}, []);
结论
在 ReactJS 中处理 CORS 错误需要了解错误发生的原因并实施相应的解决方案。无论您是修改服务器以允许 CORS、在开发过程中使用代理，还是采用其他技术，都可以确保 React 应用与外部 API 之间的顺畅通信。请记住，在应用中配置 CORS 时，始终遵循最佳实践并考虑安全隐患。
文章来源：https://dev.to/vyan/handling-cors-errors-in-reactjs-42pl