在开发过程中，经常会遇到前后端分离的情况，这时候就需要前后端进行数据交互，而跨域问题是一个经常出现的问题。本文将介绍如何在 Express.js 后台开发过程中解决跨域问题。
什么是跨域？为什么会出现跨域问题？
跨域指的是浏览器不能执行其他网站的脚本。出于安全考虑，浏览器会限制脚本的跨域操作。例如，http://localhost:3000 的网页通过 AJAX 请求 http://www.example.com/data.json 的数据，就是跨域操作。
为什么会出现跨域问题？是因为浏览器的同源策略。同源是指协议、域名、端口号均相同。不同源的客户端脚本在没有明确授权的情况下，不能读写对方的资源。
解决跨域问题的方法
- JSONP
JSONP 是一种跨域解决方案之一。它通过 <script> 标签加载一个 JavaScript 文件，该文件载入成功后会执行回调函数，并且会把需要的 JSON 数据作为参数传入回调函数。
示例代码：
app.get('/data.jsonp', (req, res) => {
const data = {
name: 'Tom',
age: 18
}
const callback = req.query.callback
res.send(`${callback}(${JSON.stringify(data)})`)
})请求：
const script = document.createElement('script')
script.type = 'text/javascript'
script.src = 'http://localhost:3000/data.jsonp?callback=foo'
document.body.appendChild(script)
function foo(data) {
console.log(data) // output：{name: "Tom", age: 18}
}- CORS
CORS 是跨源资源共享（Cross-Origin Resource Sharing）的缩写。它在服务器端允许 Web 应用程序访问跨源资源的一种机制。相比 JSONP，CORS 更加灵活，能够支持更多的请求类型，例如 PUT 和 DELETE。
示例代码：
const cors = require('cors')
app.use(cors({
origin: 'http://localhost:8080', // 允许源访问API
methods: ['GET', 'PUT', 'POST', 'DELETE'], // 允许的http请求方式
allowedHeaders: ['Content-Type', 'Authorization'] // 允许的http请求头
}))总结
跨域问题在前后端开发中是一个常见的问题。本文介绍了两种解决跨域问题的方法：JSONP 和 CORS。JSONP 简单易用，但只支持 GET 请求。CORS 更加灵活，支持多种请求类型和请求头。根据实际情况选择合适的方式来解决跨域问题。
参考链接
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65ae06beadd4f0e0ff791fbb