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

I am coding a simple app with html and node.js It is my first app by node.js, javascript and html

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

By node I want send a json, when a url is called (In my local machine the below ip is called : 127.0.0.1/local)

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

when I call that address, the expected info returned to browser correctly. Also I added a button in my html page and need to call above address, to get JSON data.

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

I have tried the solution of accepted answer at here

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

but I got this error:

但是我收到了这个错误:

XMLHttpRequest cannot load http://127.0.0.1/local Origin server is not allowed by Access-Control-Allow-Origin node.js

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

What is problem? I think the provided information is completed, but if it is not, let me know to share my code.

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

Update

Ok, I see I need to explain my exact target and provide my code;

好的,我知道我需要解释我的确切目标并提供我的代码;

I am developing a program by Node.js I have a mysql database which I want to get some info from db and show on html page. I use bookshelf, express, lodash, router on my database js file so I get data from db by calling

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

127.0.0.1:3002/local

I have a button on my html page; and need to get info when user touch it. My html page is running on

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

127.0.0.1:8080

So I think there is no need to provide Access, both of db and html is running on one server.

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

Maybe my solution to call db data by XMLHttpRequest is not a right solution. I am asking is it only way to call data or not?

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

2 个解决方案

#1

Your page and your Json resource are on 2 differents ports (3002 and 8080). This is what cause the Access-Control-Allow-Origin error. it as as security of the browser against cross-scripting.

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

In ajax, in normal case, you should have the same origin for the page and the resources, and the same origin policy rely on the hostname AND the port.

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

The solution for you is simply to access your main page and the JSON resource on the same port.

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

127.0.0.1:8080/index.html -> get your main page.

127.0.0.1:8080/index.html - >获取主页面。

127.0.0.1:8080/local -> gets your JSON

127.0.0.1:8080/local - >获取您的JSON

There is not problem by accessing it with XMLHttpRequest , this is the right way to do, and is used by many framework, like angular for example.

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

#2

Have you try to add headers in your node js file.If not then add below code:

您是否尝试在节点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();
});

#1