Nodejs 请问如何让本地的前端服务器访问本地的Nodejs后台服务器呢？ip相同但是端口不同，用的是chrome

Nodejs 请问如何让本地的前端服务器访问本地的Nodejs后台服务器呢？ip相同但是端口不同，用的是chrome

我用的是chrome，前端用ember做框架，前端服务器用的是grunt-contrib-connect, 配的地址是http://127.0.0.1:8888，后台用的express，服务器地址是http://127.0.0.1:3000 用chrome打开首页的时候，想调用后台的一个服务，结果chrome控制台报错： XMLHttpRequest cannot load http://127.0.0.1:3000/. No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://127.0.0.1:8888’ is therefore not allowed access. 请问这个问题该怎么解决呢？ 我在chrome的快捷方式里添加了 --allow-file-access-from-files也没用 谢谢！


8 回复

解决方案

你遇到的问题是由于浏览器的同源策略（Same-Origin Policy）限制。简单来说，浏览器不允许一个页面通过 AJAX 请求从另一个源（不同协议、域名或端口）获取数据。你的前端运行在 http://127.0.0.1:8888，而后台服务运行在 http://127.0.0.1:3000，因此需要配置跨域资源共享（CORS）。

前端代码示例

首先，确保你在前端代码中正确地发起 AJAX 请求。这里以 Ember.js 为例，使用 fetch 或 axios 发起请求：

// 使用 fetch API
fetch('http://127.0.0.1:3000/api/data')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));

// 或者使用 axios
axios.get('http://127.0.0.1:3000/api/data')
    .then(response => {
        console.log(response.data);
    })
    .catch(error => {
        console.error("Error:", error);
    });

后端代码示例

在 Node.js 中使用 Express 框架时，你需要安装并配置 CORS 中间件来允许跨域请求。首先，安装 cors 包：

npm install cors

然后，在你的 Express 应用中启用 CORS：

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

const app = express();

// 启用 CORS
app.use(cors());

// 示例路由
app.get('/api/data', (req, res) => {
    res.json({ message: 'Hello from the backend!' });
});

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

问题解释

  • CORS：跨域资源共享（Cross-Origin Resource Sharing）是一种机制，它使用额外的 HTTP 头来告诉浏览器允许一个域上的网页访问另一个域上的资源。
  • fetch 和 axios：这两种方法都是用于发起 AJAX 请求的标准方式。你可以选择其中一种使用，根据你的项目需求和偏好。

通过上述配置，你的前端应用将能够成功发起跨域请求到后端服务。


https://www.npmjs.org/package/cors

Access-Control-Allow-Origin 把这个百度一下 你就知道

用nginx挡在前面，利用它的反向代理功能

在前端服务的IP:PORT的路由上自写代理。

node能做代理服务器的吧？ 我查查看呢 多谢各位 大家的办法貌似都能解决问题

不就是跨域嘛

为了使你的前端服务器能够访问本地的Node.js后端服务器，你需要处理跨域资源共享（CORS）问题。当浏览器发起跨源请求时（即源不同，如不同的端口），默认情况下会阻止这种请求，除非服务器明确允许。

解决方案

你可以通过在Node.js的Express服务器中安装并使用cors中间件来允许特定或所有来源的请求。

安装cors

首先，在你的Node.js项目中安装cors模块：

npm install cors

使用cors

然后，在你的Express应用中使用它：

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

const app = express();

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

// 或者，如果你只想允许特定的来源，可以这样配置
// app.use(cors({
//   origin: 'http://127.0.0.1:8888'
// }));

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

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

解释

  • app.use(cors()); 这行代码告诉Express为所有的路由启用CORS。
  • 如果你想限制CORS只对特定的源开放，你可以提供一个对象作为参数，指定允许哪些源。

这样做之后，你的前端服务器应该能够顺利地从后端服务器获取数据，而不受CORS策略的影响。

如果你已经设置了这个但仍然遇到问题，请确保你的前端请求正确地指向了后端服务器，并且网络设置没有其他阻碍。

回到顶部