在前端开发中，经常会遇到 Ajax 跨域的问题。如果向非本站点的服务器请求数据，由于浏览器的同源策略，会被拦截掉。那么该如何处理这个问题呢？本文将会介绍 Express.js 中使用 CORS 方式来解决 Ajax 跨域问题。
什么是 CORS？
CORS，全称是 Cross-Origin Resource Sharing，翻译过来就是跨域资源共享。它是一种浏览器技术，可以让 Web 应用程序在一个域名下使用另一个域名下的资源。具体来说，就是通过在 HTTP 头中设置一些参数，来告诉浏览器该请求是否能被跨域访问。
如何使用 CORS？
在 Express.js 中，我们可以通过安装和使用 cors 模块来设置 CORS。
// 安装 cors 模块
npm install cors
// 使用 cors 模块
const cors = require('cors');
app.use(cors());上面的代码演示了如何安装和使用 cors 模块。在 Express.js 中，我们只需要在应用程序中使用 app.use() 方法来启用 cors 中间件即可。
设置 CORS 参数
在使用 cors 模块之前，我们需要先了解一些 CORS 相关的参数，以便于我们正确地配置。
origin
该参数用来设置允许访问的源。可以设置为一个字符串、一个正则表达式或者一个函数。默认情况下，origin 参数的值为 *，表示允许所有来源访问。如果设置为一个字符串或正则表达式，则只允许匹配的来源进行访问。如果设置为一个函数，则可以根据请求的来源来动态设置是否允许访问。
app.use(cors({
origin: 'http://www.example.com' // 允许 http://www.example.com 访问
}))methods
该参数用来设置允许的 HTTP 方法。可以设置为一个字符串、一个字符串数组或者 *，表示允许所有 HTTP 方法。
app.use(cors({
methods: ['GET', 'POST', 'PUT', 'DELETE'] // 允许 GET、POST、PUT、DELETE 方法访问
}))allowedHeaders
该参数用来设置允许的 HTTP 请求头。可以设置为一个字符串、一个字符串数组或者 *，表示允许所有请求头。
app.use(cors({
allowedHeaders: ['Content-Type'] // 允许 Content-Type 请求头访问
}))exposedHeaders
该参数用来设置允许浏览器访问的响应头。可以设置为一个字符串、一个字符串数组或者 false，表示不允许访问任何响应头。
app.use(cors({
exposedHeaders: ['Authorization'] // 允许 Authorization 响应头访问
}))credentials
该参数用来设置是否允许使用 Cookie 和 HTTP 认证信息。可以设置为 true 或 false。
app.use(cors({
credentials: true // 允许使用 Cookie 和 HTTP 认证信息
}))使用示例
下面演示一个使用 Express.js 和 cors 模块解决 Ajax 跨域问题的示例代码。
// javascriptcn.com 代码示例
// 引入 express.js
const express = require('express');
const app = express();
// 引入 cors 模块
const cors = require('cors');
// 设置 CORS
app.use(cors({
origin: 'http://www.example.com',
methods: ['GET', 'POST', 'PUT', 'DELETE'],
allowedHeaders: ['Content-Type'],
exposedHeaders: ['Authorization'],
credentials: true
}));
// 路由示例
app.get('/api/data', (req, res) => {
res.send('Hello, CORS!');
});
// 启动服务器
app.listen(3000, () => {
console.log('Server running at http://localhost:3000');
});在上面的代码中，我们设置了允许访问的来源为 http://www.example.com，允许的 HTTP 方法为 GET、POST、PUT、DELETE，允许的请求头为 Content-Type，允许的响应头为 Authorization，允许使用 Cookie 和 HTTP 认证信息。除此之外，我们还设置了一个 /api/data 的路由，用来演示跨域请求数据的示例。
总结
CORS 是一种解决 Ajax 跨域问题的浏览器技术，可以让 Web 应用程序在一个域名下使用另一个域名下的资源。在 Express.js 中，我们可以通过安装和使用 cors 模块来设置 CORS，从而解决 Ajax 跨域问题。同时，我们还可以根据需要设置 origin、methods、allowedHeaders、exposedHeaders 和 credentials 等参数，灵活调整 CORS 行为。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6538493b7d4982a6eb0ff5b9