在 Express.js 中跨域 Ajax 请求-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们经常需要通过 Ajax 请求获取数据。然而，由于浏览器的同源策略，不同域名下的 Ajax 请求会被浏览器拒绝。这就是跨域问题。

在 Express.js 中，我们可以通过设置响应头和使用中间件来解决跨域问题。本文将介绍如何在 Express.js 中跨域 Ajax 请求。

什么是跨域？

跨域是指在浏览器中，一个页面的脚本试图访问另一个页面的数据时，由于浏览器的同源策略，请求会被浏览器拒绝。同源策略是浏览器的一种安全策略，它限制了一个页面从另一个源加载任何资源。

同源是指协议、域名、端口号都相同。例如，http://example.com 和 https://example.com 是不同的源。

解决跨域问题

在 Express.js 中，我们可以通过设置响应头和使用中间件来解决跨域问题。

设置响应头

在 Express.js 中，我们可以通过设置响应头来解决跨域问题。在服务器端，我们可以设置 Access-Control-Allow-Origin 头，允许指定的域名访问我们的资源。

例如，我们可以设置允许所有域名访问我们的资源：

app.use((req, res, next) => {
  res.setHeader('Access-Control-Allow-Origin', '*');
  next();
});

这样，所有域名都可以访问我们的资源了。

使用中间件

在 Express.js 中，我们也可以使用中间件来解决跨域问题。cors 是一个非常流行的解决跨域问题的中间件，它可以自动设置响应头，允许指定的域名访问我们的资源。

首先，我们需要安装 cors 中间件：

npm install cors

然后，在服务器端，我们可以使用 cors 中间件：

const cors = require('cors');
app.use(cors());

这样，我们就可以允许指定的域名访问我们的资源了。

示例代码

下面是一个完整的示例代码：

// javascriptcn.com 代码示例
const express = require('express');
const cors = require('cors');
const app = express();

// 设置允许所有域名访问我们的资源
app.use((req, res, next) => {
  res.setHeader('Access-Control-Allow-Origin', '*');
  next();
});

// 或者使用 cors 中间件
// app.use(cors());

// 处理 /api/data 路径的 GET 请求
app.get('/api/data', (req, res) => {
  const data = {
    name: 'Tom',
    age: 18
  };
  res.send(data);
});

// 启动服务器
const port = 3000;
app.listen(port, () => {
  console.log(`Server running at http://localhost:${port}`);
});

在浏览器中，我们可以通过以下方式访问服务器的 /api/data 路径：

$.ajax({
  url: 'http://localhost:3000/api/data',
  type: 'GET',
  success: function(data) {
    console.log(data);
  }
});

总结

在 Express.js 中，我们可以通过设置响应头和使用中间件来解决跨域问题。设置响应头需要手动设置，比较麻烦；使用中间件则更加方便，推荐使用 cors 中间件。无论采用哪种方式，都需要注意安全性，不要允许所有的域名访问我们的资源。

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