Node.js express 跨域问题

Node.js express 跨域问题

跨域问题主要在header上下功夫 首先提供一个w3c的header定义 http://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html 再提供一个网友提供的header详解 http://kb.cnblogs.com/page/92320/ 这两个有助于帮助大家理解header的类型和作用， 但是遗憾的是跨域相关的两个header属性我都没有找到相关的定义， 下面直接告诉大家 1是Access-Control-Allow-Origin 允许的域 2是Access-Control-Allow-Headers 允许的header类型

第一项可以直接设为* 表示任意 但是第二项不能这样写，在chrome中测试跨域发现报错， 最终的代码看起来是这个样子：

app.all('*', function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Content-Type,Content-Length, Authorization, Accept,X-Requested-With");
    res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
    res.header("X-Powered-By",' 3.2.1')
    if(req.method=="OPTIONS") res.send(200);/*让options请求快速返回*/
    else  next();
});

7 回复

Node.js Express 跨域问题

在Web开发过程中，跨域问题是一个常见的挑战。特别是在使用Express框架时，我们经常需要处理不同源（域名、协议或端口）之间的请求。为了使我们的服务器能够接受来自不同源的请求，我们需要在HTTP响应头中设置一些特定的字段。

什么是跨域？

跨域是指浏览器出于安全原因限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这种限制通常被称为同源策略（Same Origin Policy）。例如，https://api.example.com 和 https://example.com 是不同的源，因为它们有不同的域名。

如何解决跨域问题？

要解决跨域问题，我们需要在服务器端设置适当的HTTP响应头。这些头信息会告诉浏览器允许哪些来源的请求可以访问资源。对于Express应用来说，我们可以使用中间件来实现这一点。

示例代码

以下是一个简单的Express应用示例，展示了如何设置必要的响应头来支持跨域请求：

const express = require('express');
const app = express();

// 设置跨域响应头
app.all('*', function(req, res, next) {
    // 允许所有来源的请求
    res.header("Access-Control-Allow-Origin", "*");

    // 允许特定的头部信息
    res.header("Access-Control-Allow-Headers", "Content-Type,Content-Length, Authorization, Accept,X-Requested-With");

    // 允许特定的方法
    res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");

    // 如果请求方法是OPTIONS，则立即返回200状态码
    if (req.method === "OPTIONS") {
        res.send(200);
    } else {
        next();
    }
});

// 定义一个简单的路由
app.get('/data', function(req, res) {
    res.json({ message: 'Hello from server!' });
});

// 启动服务器
app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

解释

  1. Access-Control-Allow-Origin: 这个头信息指定了允许访问资源的源。* 表示任何源都可以访问。

  2. Access-Control-Allow-Headers: 指定了允许的请求头。在这个例子中，我们允许 Content-Type, Content-Length, Authorization, Accept, X-Requested-With 等头部信息。

  3. Access-Control-Allow-Methods: 指定了允许的HTTP方法。在这个例子中，我们允许 PUT, POST, GET, DELETE, OPTIONS 方法。

  4. OPTIONS 请求处理: 浏览器在发送实际请求之前，通常会先发送一个 OPTIONS 请求以检查服务器是否允许该跨域请求。因此，我们需要特别处理 OPTIONS 请求，让它快速返回 200 状态码。

通过上述设置，您的Express应用将能够处理来自不同源的跨域请求，并正确响应。


根据上边的代码的完善

//allow custom header and CORS
app.all('*',function (req, res, next) {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');
  res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');

if (req.method == ‘OPTIONS’) {
res.send(200); /让options请求快速返回/
}
else {
next();
}
});

原文在这里 解决NodeJS+Express模块的跨域访问控制问题：Access-Control-Allow-Origin - 推酷

我只加了 res.header('Access-Control-Allow-Origin', '*'); 也没啥问题。

谢了

谢谢

Mark From Noder

跨域问题主要通过设置 HTTP 响应头来解决。在 Express 中，你可以使用中间件来处理这些响应头，以便允许跨源请求。

以下是解决 Node.js Express 跨域问题的示例代码：

const express = require('express');
const app = express();

// 设置跨域访问的响应头
app.use((req, res, next) => {
    res.header("Access-Control-Allow-Origin", "*"); // 允许任何来源的主机访问我们的服务
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Authorization"); // 允许的header类型
    res.header("Access-Control-Allow-Methods", "PUT, POST, GET, DELETE, OPTIONS"); // 允许的请求方法

    if (req.method === 'OPTIONS') {
        res.status(200).end(); // 如果是 options 请求，则直接返回 200 状态码
    } else {
        next(); // 处理下一个中间件或路由
    }
});

// 示例路由
app.get('/', (req, res) => {
    res.send('Hello, world!');
});

// 启动服务器
const port = process.env.PORT || 3000;
app.listen(port, () => {
    console.log(`Server is running on port ${port}`);
});

解释

  1. Access-Control-Allow-Origin: 设置为 * 表示允许任何域名访问你的 API。如果你想限制特定的域名，可以将 * 替换为具体的域名。
  2. Access-Control-Allow-Headers: 允许客户端发送的 header 类型。例如 Authorization 用于支持带有认证信息的请求。
  3. Access-Control-Allow-Methods: 允许的 HTTP 方法，例如 PUT, POST, GET, DELETE 等。
  4. OPTIONS 请求处理: 浏览器在发起跨域请求时会先发送一个 OPTIONS 预检请求，以确认实际请求是否安全。如果服务器正确响应了预检请求，浏览器才会继续发起实际的请求。因此，我们对 OPTIONS 请求直接返回 200 状态码，以确保预检请求成功。

这段代码通过中间件处理所有请求，设置了必要的响应头，从而解决了跨域问题。

回到顶部