在前端开发中，我们经常会遇到跨域问题。而使用 Express.js 开发后端服务时，也会因为默认的安全设置而导致跨域问题的出现。本文将介绍 Express.js 引发的跨域问题以及解决方案，帮助读者更好地理解和解决跨域问题。
什么是跨域问题
跨域问题指的是在浏览器中，当一个网页的 JavaScript 代码向不同域名或端口发起请求时，会被浏览器拦截。这是由于浏览器的同源策略所导致的。同源策略是浏览器的一种安全策略，它限制了一个源（协议 + 域名 + 端口）中的文档或脚本如何与来自另一个源的资源进行交互。
在 Express.js 中，默认情况下，跨域请求会被拒绝，因为它会破坏同源策略。这意味着当我们使用 Express.js 开发后端服务时，如果我们的前端代码和后端代码不在同一个域名或端口下，就会遇到跨域问题。
跨域问题的解决方案
JSONP
JSONP 是一种跨域解决方案。它利用了 HTML 中的 script 标签可以跨域加载资源的特性。具体实现方式是，在前端页面中创建一个 script 标签，将请求的 URL 带上回调函数名称作为参数，后端返回的数据会被包裹在回调函数中，从而实现跨域请求。
以下是一个使用 Express.js 实现 JSONP 的示例代码：
app.get('/jsonp', (req, res) => {
const data = { message: 'Hello, world!' }
const callbackName = req.query.callback
res.send(`${callbackName}(${JSON.stringify(data)})`)
})在上面的代码中，我们通过 req.query.callback 获取到前端传递的回调函数名称，然后将数据通过 JSON.stringify 转换为字符串，并用回调函数包裹起来返回给前端。
CORS
CORS 是另一种跨域解决方案。它通过在后端设置响应头中的 Access-Control-Allow-Origin 字段来允许特定的域名或所有域名跨域访问。
以下是一个使用 Express.js 实现 CORS 的示例代码：
app.use((req, res, next) => {
res.header('Access-Control-Allow-Origin', '*')
res.header('Access-Control-Allow-Headers', 'Content-Type')
res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS')
next()
})在上面的代码中，我们通过设置 res.header 中的 Access-Control-Allow-Origin 字段来允许所有域名跨域访问，也可以将 * 替换为特定的域名。同时，我们还设置了允许的请求方法和请求头，以确保跨域请求的安全性。
总结
本文介绍了 Express.js 引发的跨域问题及解决方案。通过使用 JSONP 或 CORS，我们可以轻松地解决跨域问题，实现前后端之间的数据交互。同时，我们也需要注意跨域请求的安全性，避免出现安全问题。希望本文能够帮助读者更好地理解和解决跨域问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65d7f9e81886fbafa45ade98