React 项目中遇到的 fetch 请求跨域问题解决方法-JavaScript中文网-JavaScript教程资源分享门户

React 项目中遇到的 fetch 请求跨域问题解决方法

在前端开发中，经常需要使用 fetch 请求后端接口来获取数据。然而，当我们使用 fetch 请求的时候，有时候会遇到跨域问题，导致请求失败。那么在 React 项目中遇到这种问题该如何解决呢？

什么是跨域问题

跨域问题指的是前端代码在请求非本域下的 API 接口时，由于浏览器的同源策略限制，导致请求失败。同源策略是指，如果一个 URL 的协议、端口、主机都相同，那么这两个 URL 就是同源的；反之则为跨域。例如，http://localhost:3000 和 http://localhost:4000 就是跨域请求。

解决跨域问题的方法

（1）在后端接口中添加 Access-Control-Allow-Origin 头部信息

Access-Control-Allow-Origin 是一个响应头部信息，用于授权一个源访问另一个资源。我们可以在后端接口中添加这个头部信息来解决跨域问题，例如：

app.use('/api', function(req, res) {
    res.header('Access-Control-Allow-Origin', '*'); // *代表允许任意域名访问，也可以设置指定的域名
    res.send('Hello World');
});

（2）使用 JSONP 请求

JSONP 是一种跨域方式，可以绕过浏览器的同源策略，利用 script 标签的 src 属性可以跨域访问的特性来解决跨域问题。要使用 JSONP，我们需要与后端合作，在后端接口中添加回调函数，例如：

function jsonp(url, callback) {
    const script = document.createElement('script');
    script.src = url + '?callback=' + callback;
    document.body.appendChild(script);
}

jsonp('http://localhost:3000', 'callback');

（3）使用代理服务器

通过搭建一个代理服务器来转发请求，既可以避免跨域问题，也可以在请求过程中做一些中间件处理。例如，我们可以使用 create-react-app 提供的开发代理功能来转发请求，例如：

// package.json
"proxy": "http://localhost:3000"

// 组件内请求
fetch('/api')
    .then(res => res.json())
    .then(data => console.log(data))
    .catch(err => console.error(err));

总结

以上是解决 React 项目中 fetch 跨域问题的几种方法，可以根据具体情况选择实施。需要注意的是，使用代理服务器时要仔细检查请求路径是否正确，同时可以结合第二种方法使用 JSONP 来解决一些特殊的跨域问题。希望本文能够帮助到大家解决实际开发中遇到的跨域问题。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6520cb9795b1f8cacd83e40e