前言
在前端开发中，我们经常会用到 AJAX 技术来实现异步数据交互。而在使用 Express.js 框架时，由于其默认的安全策略，会导致 AJAX 跨域问题。这种情况下，我们需要寻找一些解决办法，以便在 Express.js 中解决 AJAX 跨域问题。
什么是 AJAX 跨域问题
在浏览器中，出于安全考虑，不允许向不同域名、不同端口、不同协议的服务器发起 AJAX 请求。这种情况下，就会出现 AJAX 跨域问题。
例如，我们在本地开发环境中使用 Express.js 框架，前端代码是运行在 localhost:3000 端口上的，而 API 接口是运行在 localhost:8080 端口上的。这时候，我们在前端代码中发起 AJAX 请求，就会被浏览器拦截，因为它涉及到跨域请求。
解决 AJAX 跨域问题的方法
方法一：使用 CORS
CORS（Cross-Origin Resource Sharing）是一种跨域资源共享的机制，它允许服务器端设置响应头，从而允许跨域请求。在 Express.js 中，我们可以使用 cors 中间件来实现 CORS。
首先，我们需要安装 cors 中间件：
npm install cors --save
然后，在 Express.js 中使用 cors 中间件：
const express = require('express');
const cors = require('cors');
const app = express();
app.use(cors());这样，就可以在 Express.js 中解决 AJAX 跨域问题了。
方法二：使用 JSONP
JSONP（JSON with Padding）是一种利用 <script> 标签实现跨域请求的技术。在 Express.js 中，我们可以使用 jsonp 方法来实现 JSONP。
首先，在 Express.js 中设置 JSONP 回调函数：
app.get('/api/data', (req, res) => {
const data = { name: '张三', age: 18 };
const callback = req.query.callback;
res.jsonp({ data, callback });
});然后，在前端代码中发起 JSONP 请求：
function handleResponse(data) {
// 处理数据
}
const script = document.createElement('script');
script.src = 'http://localhost:8080/api/data?callback=handleResponse';
document.head.appendChild(script);这样，就可以在 Express.js 中解决 AJAX 跨域问题了。
总结
本文介绍了在 Express.js 中解决 AJAX 跨域问题的两种方法：使用 CORS 和使用 JSONP。不同的方法适用于不同的场景，需要根据实际情况选择。希望本文对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6615f2f1d10417a2225d3f56