使用 Express.js 开发跨域 API 实战-JavaScript中文网-JavaScript教程资源分享门户

跨域问题一直是前端开发中的一个难点。当我们需要在前端页面中使用 AJAX 请求其它域名下的 API 时，由于浏览器的同源策略，我们无法直接访问该 API。本文将介绍如何使用 Express.js 开发跨域 API，解决跨域问题。

什么是跨域

跨域是指在浏览器中，当前页面的域名和 AJAX 请求的域名不一致，浏览器会限制 AJAX 请求的访问。例如，我们的前端页面部署在 http://localhost:3000 下，而 API 服务部署在 http://api.example.com 下，这时我们在前端页面中使用 AJAX 请求 http://api.example.com/users 接口，就会出现跨域问题。

解决跨域问题

在 Express.js 中，我们可以使用 cors 中间件来解决跨域问题。cors 中间件会在响应头中添加 Access-Control-Allow-Origin 头，允许指定的域名访问 API。

安装 `cors`

在项目中安装 cors：

npm install cors --save

使用 `cors`

在 Express.js 中使用 cors：

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

app.use(cors());

// API 路由
app.get('/users', (req, res) => {
  // ...
});

app.listen(3000, () => {
  console.log('API 服务已启动');
});

这样，我们就可以解决跨域问题了。但是，我们需要注意的是，使用 cors 中间件时，需要指定允许访问的域名。如果我们需要允许所有域名访问 API，可以使用通配符 *：

app.use(cors({
  origin: '*'
}));

使用 JSONP 解决跨域问题

除了使用 cors 中间件，我们还可以使用 JSONP 来解决跨域问题。JSONP 是一种前端技术，通过动态创建 <script> 标签，来实现跨域请求数据。在服务端，我们需要对请求进行处理，返回 JSONP 格式的数据。

实现 JSONP

在 Express.js 中，我们可以使用 jsonp 方法来实现 JSONP。jsonp 方法会在响应中返回 JSONP 格式的数据，格式为 callbackName(data)。

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

// API 路由
app.get('/users', (req, res) => {
  const data = {
    name: '张三',
    age: 20
  };
  const callbackName = req.query.callback;
  res.jsonp(callbackName + '(' + JSON.stringify(data) + ')');
});

app.listen(3000, () => {
  console.log('API 服务已启动');
});

在前端页面中，我们可以使用以下代码来请求该 API：

function handleData(data) {
  console.log(data);
}

const script = document.createElement('script');
script.src = 'http://api.example.com/users?callback=handleData';
document.head.appendChild(script);

这样，我们就可以通过 JSONP 来解决跨域问题了。

总结

本文介绍了如何使用 Express.js 开发跨域 API，解决跨域问题。我们可以使用 cors 中间件来设置响应头，允许指定域名访问 API；也可以使用 JSONP 来动态创建 <script> 标签，实现跨域请求数据。希望本文能够对大家有所帮助。

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

使用 Express.js 开发跨域 API 实战