迹忆客 EN >

当前位置:主页 > 学无止境 > 网络 >

如何在 React/Next.js 中避免跨域(CORS) 问题

作者:迹忆客 最近更新:2022/08/30 浏览次数:

如果您编写过任何前端代码,那么您之前可能遇到过 CORS 错误,如下所示:

Access to _ has been blocked by CORS policy

跨域资源共享 (CORS) 是一种协议,它定义了跨不同 URL 时应如何处理 Web 请求。


为什么跨域请求会成为问题?

对于我们访问的每个网站,浏览器都会保存很多关于我们的状态。 假设我们已登录 mybank.com,并且我们在 mybank.com 上设置了一个 cookie,表明我们已登录。

在浏览时,我们不小心访问了恶意网站,该网站向 mybank.com 发出如下请求:

// 从 https://malicious.site 获取请求
fetch("https://api.mybank.com/account_details", {
    method: "GET",
    credentials: "include",
})

如果允许此请求并且包含我们的 cookie,则恶意网站的所有者将能够代表我们提出请求并读取我们的帐户详细信息。

使用 CORS,允许服务器指定它将接受和拒绝哪些跨域请求。 它可以拒绝需要 cookie 的请求。 它可以拒绝来自 untrusted.mybank.com 的请求,但接受来自 app.mybank.com 的请求。 它可以拒绝所有 POST 请求,但允许 GET 和 PUT。

关于 CORS 需要注意的重要一点是,配置/设置是在服务器上完成的,并由服务器和我们的浏览器强制执行。 大多数服务器框架都有一个用于配置 CORS 标头的库,但如果我们想查看底层标头本身,这里有一个很好的资源。


实际例子

假设我们有一个带有 Express 后端的 React 应用程序。 我们的前端在端口 3000 上运行——这是 React 的常见默认值。

由于我们的后端也不能在本地的 3000 端口上运行,我们将设置 Express 以在 4000 端口上运行。

const express = require('express')
const app = express()
const port = 4000
app.get('/whoami', (req, res) => {
    res.send('Who is anybody?')
})
app.listen(port, () => {
    console.log(`Example app listening on port ${port}`)
})

如果我们的 React 应用程序像这样向我们的后端发出 fetch 请求:

// 获取来自 http://127.0.0.1:3000 的请求
fetch("http://127.0.0.1:4000/whoami")

我们应该期待一个 CORS 错误。 就像我们之前的示例一样,127.0.0.1:3000 和 127.0.0.1:4000 被视为两个独立的域,因此我们还不能跨它们发出请求。 让我们看一些解决此问题的方法。

修复1:修复服务器

一种方法是修复我们的服务器。 我们可以通过安装 CORS 库 (https://www.npmjs.com/package/cors) 并告诉服务器期待来自 127.0.0.1:3000 的请求来做到这一点

app.use(cors({
    origin: 'http://127.0.0.1:3000',
}))

我们的请求现在将成功。 这种方法非常简单,通常是很好的做法。 如果我们的前端和后端托管在两个不同的子域上,我们可以在生产中使用相同的方法。

修复2:添加代理

在生产中,在某些情况下,我们将从同一个来源托管我们的前端和后端。 在这些情况下,我们通常希望编写如下所示的 fetch 代码:

fetch("/whoami")

而不是这样:

const url;
if (process.env.NODE_ENV === "production") {
    url = "https://www.example.com/whoami"
} else {
    url = "http://127.0.0.1:4000/whoami"
}
fetch(url)

为此,create-react-app 实际上自带设置简单代理的能力。 将以下内容添加到我们的 package.json 中:

"proxy": "http://localhost:4000",

然后,任何看起来像 API 请求的请求(例如,内容类型为 application/json)都会自动转发到 http://localhost:4000

绕过 CORS 问题的原因是,对于浏览器来说,请求将转到 http://localhost:3000,因此看起来不像是跨域请求。 http://localhost:3000 的服务器确实将请求转发到 http://localhost:4000,但浏览器不知道。

如果我们使用 Next.js 而不是 create-react-app,则可以在 next.config.js 中设置重定向,它将转发所有匹配的流量:

module.exports = {
  async rewrites() {
    return [
      {
        source: '/api/:path*',
        destination: 'http://localhost:4000/:path*'
      }
    ]
  }
}

总结

在 React 和 Next.js 中修复任何 CORS 问题的最简单方法实际上是不更改 React 或 Next.js 中的任何内容,而是修复我们的服务器以允许来自它们的请求。

如果我们无法更改服务器,React 和 Next.js 都有办法让我们将它们转换为代理,并代表我们将请求代理到后端。 这通过使我们的浏览器认为请求不再是跨域请求来避免任何 CORS 问题。

转载请发邮件至 1244347461@qq.com 进行申请,经作者同意之后,转载请以链接形式注明出处

本文地址:

相关文章

Comparison between Node.js and React JS

发布时间:2025/04/17 浏览次数:79 分类:Node.js

This article compares and contrasts two programming languages, Node.js and React . React and Node.js are examples of open source JavaScript libraries that are used to build user interfaces and server-side applications. There are big differe

React UseState Hook Types in TypeScript

发布时间:2025/04/15 浏览次数:125 分类:TypeScript

This article will demonstrate the use of React hooks in TypeScript useState . React useState hook definition React useState hooks play an important role when using functional components, from storing temporary data to receiving data from AP

React event types in TypeScript

发布时间:2025/04/15 浏览次数:134 分类:TypeScript

In React, you often need to listen to event listeners that are triggered due to certain operations on certain HTML elements. TypeScript has strong typing support for all events triggered due to certain operations on HTML elements, such as t

How to fix cross-origin (CORS) issues in Angular

发布时间:2025/03/17 浏览次数:196 分类:NETWORK

When we use a backend server for our Angular application during development, when trying to request resources from the API, we may encounter some cross-origin (CORS) restrictions that prevent us from accessing data from the API.

How to avoid cross-origin (CORS) issues in React/Next.js

发布时间:2025/03/17 浏览次数:170 分类:NETWORK

In this article, we will introduce how to avoid cross-origin (CORS) issues in React/Next.js. Cross-origin resource sharing (CORS) is a protocol that defines how web requests should be handled when crossing different URLs.

React Tutorial - Transferring Props

发布时间:2025/03/16 浏览次数:188 分类:React

React transfers Props. Props are generated when components are encapsulated. Components expose some properties (Props) to the outside world to complete some functions.

React Tutorial: Props Anti-Pattern

发布时间:2025/03/16 浏览次数:187 分类:React

React's Props anti-pattern, using Props to generate state in getInitialState is an anti-pattern - Anti-Pattern.

React Tutorial - Props Validation

发布时间:2025/03/16 浏览次数:102 分类:React

Props validation is a very useful way to use components correctly. It can avoid many bugs and problems as your application becomes more and more complex. In addition, it can make your program more readable.

扫一扫阅读全部技术教程

社交账号
  • https://www.github.com/onmpw
  • qq:1244347461

最新推荐

教程更新

热门标签

扫码一下
查看教程更方便