使用 Next.js 时如何处理前后端跨域的问题？-JavaScript中文网-JavaScript教程资源分享门户

随着前端开发的发展，前端由一开始的简单页面转变为单页应用，再到现在的 SSR（服务端渲染）与 CSR（客户端渲染）相结合。在这个过程中，前后端分离的思路也越来越普及，因此前后端跨域问题也越来越突出。本文将介绍如何使用 Next.js 来解决前端与后端跨域的问题。

什么是跨域？

在浏览器中进行资源请求时，同源策略（same-origin policy）会限制页面的访问。所谓同源是指协议、域名、端口号都相同，只有这三者都相同时才算是同源。不同源的情况下，浏览器通常会限制脚本或者其他资源的访问。这样的限制是出于安全考虑，防止恶意脚本对当前页面进行攻击。

因此跨域（cross-origin）就是指在与当前页面不同源的情况下，两者之间进行数据的请求或交互的行为。对于客户端向不同源的服务器请求数据时，服务器通常默认是不许许可的，需要进行一些配置的调整。

Next.js 中的解决方案

在使用 Next.js 的时候，通常会将 Next.js 作为前端项目的骨架，但实际上 Next.js 也可以作为一个服务端框架来使用。在这种情况下，我们就能很方便地处理前后端跨域问题。

转发 API 请求

在 Next.js 中，我们可以通过 server.js 来定义一个自定义的 Express 服务。在这个服务中，我们可以设置对特定 URL 路径的请求进行转发，从而获得被请求的数据以及进行相应的处理。

例如，我们可以设置将前端请求的 /api 路径转发到另外一个服务器上：

// javascriptcn.com 代码示例
// server.js

const express = require("express");
const next = require("next");
const request = require("request");
const dev = process.env.NODE_ENV !== "production";
const app = next({ dev });
const handle = app.getRequestHandler();

app.prepare().then(() => {
  const server = express();

  server.get("/api/:path", (req, res) => {
    const newPath = "https://api.example.com/" + req.params.path;
    req.pipe(request({ url: newPath })).pipe(res);
  });

  server.get("*", (req, res) => {
    return handle(req, res);
  });

  server.listen(3000, err => {
    if (err) throw err;
    console.log("> Ready on http://localhost:3000");
  });
});

在这个例子中，我们使用了 Node.js 中的 request 模块来发送 HTTP 请求，以获取到被请求的数据。对于请求的路径，我们设置了一个参数，从而能够动态地获取对应的路径。

启用 CORS

对于浏览器上的 JavaScript，我们可以通过设置响应头的方式启用 CORS（跨域资源共享）。这种方式通常用于当我们的前端应用需要向后端服务器上访问数据时。在 Next.js 中，我们可以启用 cors 包来处理跨域问题。

// javascriptcn.com 代码示例
// server.js

const cors = require("cors");
const express = require("express");
const next = require("next");
const dev = process.env.NODE_ENV !== "production";
const app = next({ dev });
const handle = app.getRequestHandler();

app.prepare().then(() => {
  const server = express();

  server.use(cors());

  server.get("/api/:path", (req, res) => {
    //...
  });

  server.get("*", (req, res) => {
    return handle(req, res);
  });

  server.listen(3000, err => {
    if (err) throw err;
    console.log("> Ready on http://localhost:3000");
  });
});

总结

对于前后端分离的项目，在使用 Next.js 时解决跨域问题非常重要。上面我们介绍了两种解决方案，可以根据不同的业务场景选择适合的方法。我们相信，通过学习本文，你能够更好地解决跨域问题。

参考

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