Node.js 和 Ajax 之间的问题

Node.js 和 Ajax 之间的问题

写了一个 Node.js 服务器，服务器中只处理 POST 请求，然后写了个 HTML 界面，在 HTML 中使用 Ajax（原生）POST send 的方式向Node.js 服务器发送请求，在本机测试是 http://127.0.0.1:3000/ 。。。。。服务器能正常接收到请求并处理。但是我丢到公网之后，HTML 设置了域名，Node 监听 3001，在 HTML 中的 Ajax 代码里，不管 url 是 http://127.0.0.1:3001 还是 http://服务器ip.3001，Node 都接收不到请求，求教，急，谢谢各位大哥大神了，受不了了~


10 回复

Node.js 和 Ajax 之间的问题

你遇到的问题很可能是由于跨域资源共享（CORS, Cross-Origin Resource Sharing）导致的。当你将应用部署到公网时，浏览器的安全策略会阻止你的前端应用通过 AJAX 请求访问不同源的资源。在本地环境中，这种限制通常不会出现。

解决方案

要解决这个问题，你需要确保 Node.js 服务器允许来自不同源的请求。这可以通过设置适当的 CORS 头来实现。

首先，我们需要安装一个处理 CORS 的中间件，比如 cors：

npm install cors

接下来，我们修改 Node.js 服务器代码，添加 CORS 支持：

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

// 使用 cors 中间件
app.use(cors());

// 解析 JSON 请求体
app.use(express.json());

// 处理 POST 请求
app.post('/submit', (req, res) => {
    const data = req.body;
    console.log('Received data:', data);
    res.send('Data received successfully');
});

app.listen(3001, () => {
    console.log('Server is running on http://localhost:3001');
});

示例 HTML 和 AJAX 代码

假设你的 HTML 文件如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AJAX Test</title>
</head>
<body>
    <button id="send-data">Send Data</button>

    <script>
        document.getElementById('send-data').addEventListener('click', () => {
            const xhr = new XMLHttpRequest();
            xhr.open('POST', 'http://your-public-domain-or-ip:3001/submit', true);
            xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    console.log(xhr.responseText);
                }
            };
            const data = { message: 'Hello from frontend' };
            xhr.send(JSON.stringify(data));
        });
    </script>
</body>
</html>

在这个例子中，http://your-public-domain-or-ip:3001/submit 是你的 Node.js 服务器监听的地址。确保替换为你的实际域名或 IP 地址。

通过上述步骤，你应该能够解决跨域问题，并使你的 AJAX 请求成功发送到 Node.js 服务器。


你可以在服务器本地使用curl试下能否访问到, 如果可以node服务就没有问题, 应该是防火墙导致3001端口无法访问. 如果在服务本地无法访问到, 就是node服务的问题

等等大神，我在服务器上localhost没问题，可以访问到，但是在服务器那边用 服务器ip+3001就不行了

等等大神，我在服务器上localhost没问题，可以访问到，但是在服务器那边用 服务器ip+3001就不行了

那应该是防火墙的问题了, 把防火墙关掉试试

在防火墙添加3001端口入站规则，就是允许访问的意思！

解决了，就是防火墙，，额。。。。

打开防火墙3001端口有点得不偿失 为啥不用nginx做反向代理呢

楼上正解 一般都是nginx反代

遇到这个问题可能是因为浏览器的同源策略（Same-Origin Policy）。当你的HTML页面运行在公网上的某个域名时，它默认只能与该域名下的服务进行通信。如果你尝试通过Ajax请求公网上的不同端点（如http://服务器ip:3001），浏览器会阻止这个请求。

解决这个问题有几种方法：

  1. CORS (Cross-Origin Resource Sharing): 在Node.js服务器端添加CORS支持，允许来自公网的请求。你可以使用cors中间件来简化这个过程。

    安装cors包：

    npm install cors

    在Node.js服务器中配置CORS：

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

// 使用cors中间件
app.use(cors());

app.post('/endpoint', (req, res) => {
  console.log(req.body);
  res.send('Received data');
});

app.listen(3001, () => {
  console.log('Server is running on port 3001');
});

  2. 修改Ajax请求: 如果无法更改服务器配置，可以尝试修改Ajax请求以绕过跨域问题，例如将HTML页面放在同一个域名下，或者使用代理服务器。

    示例Ajax请求：

    fetch('http://服务器ip:3001/endpoint', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ key: 'value' })
})
.then(response => response.text())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

以上两种方法都可以帮助你解决问题，根据具体情况选择适合的方法。希望这些信息对你有帮助！

回到顶部