如何在html页面中从静态URL获取JSON

Question

我用html和node.js编写一个简单的应用程序这是我的第一个应用程序node.js，javascript和html

通过节点我想发送一个json，当一个url被调用时（在我的本地机器中，下面的ip被称为：127.0.0.1/local）

当我呼叫该地址时，预期的信息正确返回浏览器。 我还在我的html页面中添加了一个按钮，需要调用上面的地址，以获取JSON数据。

我在这里尝试了接受答案的解决方案

但是我收到了这个错误：

XMLHttpRequest无法加载http://127.0.0.1/local Access-Control-Allow-Origin node.js不允许Origin服务器

有什么问题？ 我认为提供的信息已经完成，但如果不是，请告诉我分享我的代码。

• 更新

好的，我看到我需要解释我的确切目标并提供我的代码;

我正在开发Node.js的程序我有一个mysql数据库，我想从db获取一些信息并在html页面上显示。 我在我的数据库js文件上使用bookshelf，express，lodash，router，所以我通过调用从db获取数据

127.0.0.1:3002/local

我的html页面上有一个按钮; 并且需要在用户触摸时获取信息。 我的html页面正在运行

127.0.0.1:8080

所以我认为没有必要提供Access，db和html都在一台服务器上运行。

也许我的XMLHttpRequest调用db数据的解决方案不是一个正确的解决方案。 我问的是它是否只是调用数据的方式？

Answer 1

您的页面和Json资源位于2个不同的端口（3002和8080）上。 这是导致Access-Control-Allow-Origin错误的原因。 它与浏览器的安全性相反，可以防止跨脚本编写。

在ajax中，在正常情况下，页面和资源应具有相同的原点，并且相同的源策略依赖于主机名和端口。

您的解决方案就是在同一端口上访问主页面和JSON资源。

• 127.0.0.1:8080/index.html - >获取您的主页。
• 127.0.0.1:8080/local - >获取您的JSON

使用XMLHttpRequest访问它没有问题，这是正确的方法，并且被许多框架使用，例如angular。

Answer 2

您是否尝试在节点js文件中添加标头。如果没有，请添加以下代码：

app.use(function (req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
 res.header("Access-Control-Allow-Headers", "Origin, __setXHR_, X-Requested-With, Content-Type, user-agent, Accept, X-Auth-Token, X-Amz-Content,Authorization");
res.header("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE");
next();
});