解决 Express.js 跨域问题的几种思路

在前后端分离的项目中，前端的请求往往需要跨域访问后端 API，此时就会遇到跨域问题。Express.js 是一个常用的 Node.js Web 框架，本文将介绍解决 Express.js 跨域问题的几种思路。

什么是跨域问题？

跨域问题是指前端 JavaScript 发起的 AJAX 请求访问不同域名（例如http://www.example.com、http://api.example.com）或端口（例如http://localhost:8080、http://localhost:3000）的 API，由于浏览器的同源策略保护，这些请求会被浏览器拦截，不允许访问。

1. 启用 CORS 中间件

CORS（Cross-Origin Resource Sharing）是一种跨域资源共享协议，通过在响应头中设置 Access-Control-Allow-Origin 字段实现跨域访问。在 Express.js 中，可以使用 cors 中间件来启用 CORS 支持。

const express = require("express");
const cors = require("cors");

const app = express();

app.use(cors());

app.get("/api/data", (req, res) => {
  res.send("Hello, CORS!");
});

app.listen(8080, () => {
  console.log("Server is listening on port 8080");
});

使用 cors 中间件后，访问 http://localhost:8080/api/data 就可以正常获取响应。

2. JSONP 跨域请求

JSONP（JSON with padding）是一种跨域数据访问方案，它利用了 HTML document 中 script 标签的跨域特性，可以绕开浏览器的同源策略。在 Express.js 中，可以返回 JSONP 格式的数据来解决跨域问题。

const express = require("express");

const app = express();

app.get("/api/data", (req, res) => {
  const data = { message: "Hello, JSONP!" };
  const callback = req.query.callback;
  if (callback) {
    res.send(`${callback}(${JSON.stringify(data)})`);
  } else {
    res.send(data);
  }
});

app.listen(8080, () => {
  console.log("Server is listening on port 8080");
});

在客户端发送 JSONP 请求时，需要在请求 url 中指定回调函数名，例如：

<script>
  function jsonpCallback(data) {
    console.log(data.message);
  }
  const script = document.createElement("script");
  script.src = "http://localhost:8080/api/data?callback=jsonpCallback";
  document.head.appendChild(script);
</script>

3. 代理跨域请求

代理跨域请求的思路是由前端向后端发送请求，后端再向目标 API 发送请求，并将请求结果返回前端。通过这种方式，前端与后端之间的请求就不受同源策略的限制，从而实现跨域访问 API。

在 Express.js 中，可以使用 http-proxy-middleware 中间件来实现代理跨域请求。

const express = require("express");
const { createProxyMiddleware } = require("http-proxy-middleware");

const app = express();

app.use(
  "/api",
  createProxyMiddleware({
    target: "http://api.example.com",
    changeOrigin: true,
    pathRewrite: {
      "^/api": "",
    },
  })
);

app.listen(8080, () => {
  console.log("Server is listening on port 8080");
});

使用 http-proxy-middleware 中间件后，访问 http://localhost:8080/api/data 就会转发到 http://api.example.com/data，并将结果返回前端。

总结

本文介绍了解决 Express.js 跨域问题的几种思路，包括启用 cors 中间件、使用 JSONP 跨域请求和代理跨域请求。使用这些方法可以让前端通过 AJAX 请求访问不同域名的 API，并且不受浏览器同源策略的限制。

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