深入浅出 Node.js 跨域问题

小蓝 • 2024-12-30 16:09 • 编程

一、Node.js 跨域问题

随着前后端分离的不断深入以及微服务架构的普及，前端发起跨域请求是必不可少的。而 Node.js 作为一种服务器端语言，也需要面对跨域问题。

跨域请求，简单来说就是一个页面的脚本在发送 XMLHttpRequest （AJAX）请求时，请求的 URL 与该页面所搭载的服务器不在同一域下。

Node.js 默认情况下是无法处理跨域请求的，一般来说我们可以通过一些中间件去实现跨域请求功能。

二、Node.js 构建网页

在 Node.js 中，我们可以使用模板引擎来渲染 HTML 页面，让 Node.js 具备构建网页的功能。其中，我们比较常用的两个模板引擎是 EJS 和 Pug。在这里，我们以 EJS 为例。


// app.js
const express = require('express');
const path = require('path');
const app = express();

app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

app.get('/', (req, res) => {
  res.render('index', { title: 'Node.js 跨域请求' });
});

app.listen(3000, () => {
  console.log('Server started on port 3000');
});


// views/index.ejs
<html>
  <head>
    <title><%= title %></title>
  </head>
  <body>
    <h1><%= title %></h1>
  </body>
</html>

三、Node.js 跨域请求

1、nodejs 跨域 cors

CORS（跨域资源共享）是一种机制，它使用类似于 JSONP 的方式允许跨域访问，需要在服务器响应头中设置 Access-Control-Allow-Origin，表示允许哪些域的请求跨域。


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

app.use(cors());

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

app.listen(3000, () => {
  console.log('Server started on port 3000');
});

2、nodejs 跨域直接转发

有时候，我们需要直接将请求转发到另一个域名下的服务器，这时候可以使用 http-proxy-middleware 中间件。


const express = require('express');
const proxy = require('http-proxy-middleware');
const app = express();

app.use('/api', proxy({ target: 'http://localhost:8080', changeOrigin: true }));

app.listen(3000, () => {
  console.log('Server started on port 3000');
});

四、Node.js 解决跨域问题

1、nodejs 跨域问题 cors

除了直接使用 cors 中间件以外，还可以手动设置响应头来实现跨域请求。在这里，我们自行编写一个中间件来实现该功能。


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

app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
  res.header('Access-Control-Allow-Headers', 'Content-Type');
  next();
});

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

app.listen(3000, () => {
  console.log('Server started on port 3000');
});

2、nodejs 跨域问题 nginx

在生产环境中，我们通常使用反向代理服务器（如 Nginx）来解决跨域问题，Nginx 已经自带了实现 CORS 的功能，只需要简单的配置即可。


server {
  listen 80;
  server_name example.com;

  location / {
    root /var/www/html;
    index index.html;
  }

  location /api/ {
    add_header 'Access-Control-Allow-Origin' '*';
    proxy_pass http://localhost:3000;
  }
}

五、Node 跨域问题解决方案总结

通过以上的讲解，我们了解了 Node.js 跨域问题以及解决方案。需要注意的是，不同的方案适用于不同的场景，我们需要根据实际情况选择最适合自己的方法。同时，还需要注意安全性问题，避免出现安全漏洞。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/301589.html