I'm trying to write a local application in JavaScript to fetch some JSON data from a site, parse it, and display some statistics for me. So far I have been unable to get it to work, or even able to pull JSON from any site anywhere. Is this because of the same origin policy? I thought this would be relaxed for a locally stored .html file on my own machine.
The site I am trying to use doesn't appear to support JSONP or CORS.
I would have thought this was a common scenario and am surprised that I can't get it to work, although I'm not very experienced with JavaScript. I tried using XMLHttpRequest, and I also taught myself quite a bit of JQuery, but I am unable to get any simple access to work.
Is what I am trying to do impossible?
In JQuery, my basic access looks like this - the alert popup never gets called.
$.getJSON(url,function(result) {
alert("success");
});
I thought this would be relaxed for a locally stored .html file on my own machine.
No, the opposite is usually true – local files usually can’t even request other local files via Ajax.
Anyways, yes, it is probably because of the same origin policy. For a local thing, what you can do is proxy the page you need through some server in some language and also use that server to serve your files. Nginx can, in fact, do that all on its own; the configuration would look something like the below. You could also use curl and CGI.
location = /proxymypage {
proxy_pass http://remote-site.com/data.json;
}
location / {
root /path/to/your/files;
}
Related
I'm stumped. So I've written a nice little web app that gets all its data from a JSON that has one array in it. To bridge the AngularJS-parts and the data, I have this line in my services.js
.constant("baseURL","http://localhost:3000/")
This of course only works with me locally. But I haven't considered that I might have to get my web host to serve up the data.
Now, I'm a complete beginner at this. I've managed to code my app with moderate effort, having only started coding in January. So I'm completely out of my league here. I don't even know what I'm looking for. I mean, I have to replace the localhost:3000with something. But if I do http://domain.com/db.json that obviously doesn't work.
I've talked to Godaddy's tech support and they go "Nuh-uh, not helping" the second I show them this line of code. Because, to be honest, I don't even know what the address I'm looking for is called. Is it a URI?
I have a few questions regarding this and I turn to you, because - this story gets worse - there's a possible job on the line for me. Not a coding thing, but the data that is parsed from the JSON into the site.
What is the address I'm looking for called?
How do I get my hosting to serve up JSON data? I mean, I don't even know what I need to ask the tech support people here. Do I need a JSON server?
If they don't offer it, where could I get my JSON data served in a way that I can push more articles into the array and preferrably edit it, too?
Thank you so much!
EDIT #1
If it helps, here's the contents of my /webroot/personalfolder
You will need to change your localhost:8000 to your domain name. For example, if you bought www.foobar.com then your base URL would just become www.foobar.com On a rented web server (like GoDaddy Hosting) ports 80 and 443 are normally open so you wouldn't need to specify this. If you are self hosting, you will need to open these ports on your router and apply port forwarding rules to your PC.
When you host your published website, you will just put your JSON file in with your Website Source. For example your structure may look like this:
AngularAppFolder/index.html
js
csss
Just add another folder called db place your JSON file in there, and reference it in your Angular code, no need to worry, its just another file just like your HTML or CSS which makes up your website. Remember though that your JSON data will be publicly available here!
If your looking for an alternative way of getting your JSON data, you may want to look into creating a REST API. This uses a web server to dish out data depenant on the HTTP request you send to it. but that's a very big topic! Here is some reading into it if your feeling brave! Node.js REST API tutorial
Final note: if you are self-hosting this application (running it on your own computer or server) then you will need to change the DNS record for your domain name to the global IP address of the server! you shouldn't have to worry if your using the hosting offerings from a company such as GoDaddy however.
You need to change the baseURL value to whatever the URL on which the site is hosted. Something like http://<mysite>.com.
I am trying to search an outside url for content matching "title" and return the results to my HTML page in the background through Javascript. I have been using Javascript and not found any resources that resolve my query, maybe I'm asking wrong?
but I would basically search the document with :
var title = document.getElementsByName("title");
The hard part is connecting to the page and searching through the HTML source code.
TIA!
You can't generally get the content from an outside URL unless server specifically allows you to do so. But, you can do it from server side. You will be able to get the content of any URL from your server. Server must include an header in response with name access-control-allow-origin which contains patterns/name of your domain.
However, you can do it from server side anyway, unless you are blocked specifically by the server.
You will need to develop a solution in which you grab the content for your outside URL from your server. It can be anything like PHP, Node.js, C# etc. After receiving response from the external server, deliver it in response to the browser using AJAX or anything. Then you can play with it anyway you want using JavaScript or JQuery.
Important Note:
Make sure whatever you are trying to access in anyway, you are allowed to do so. If they (your outside URL) wants to share something with public, they must be providing some APIs or other solutions to allow you access to their content.
Research has led to to a solution, implementing a scraper. There are many in existence,scrapy for instance. Just a head's up for those with the same question.
Im using Coda, and Im trying to write a program to use Javascript/Jquery to load nfl's html on their stats page (http://www.nfl.com/stats/player), and then remove all of the excess html. Resulting several lists of players and their stat's.
I've tried using `$('#container').load('http://www.nfl.com/stats/player').
This works fine in Coda, but I can't parse the html the way I want to.
In google chrome I get the error
XMLHttpRequest cannot load http://www.nfl.com/stats/player. Origin null is not
allowed by Access-Control-Allow-Origin.
From what I understand this is a security feature built into all browsers. Is there a workaround to this issue? Can I use a different type of request?
I understand that i should be using JSONP for this type of request, but I dont believe the nfl has an API that would make this possible.
I've seen questions like this get thrown around, but I don't think anyone's given a really good solid answer yet.
I think theres still a lot of people wondering if theres an easy way to $.get cross-domain HTML and parse it.
You're not allowed to do this because it can be used for XSS (cross site scripting) where scripts are accessed by scripts outside of the domain of the site. i.e. you can get cookie information or such this way.
You will have to do this server side. If you're using php you can use $content = file_get_contents('http://nfl.com/stats/player'); or you can do it using curl if you wish.
Otherwise the legit way to do it is through an API, but as you've pointed out that isn't an option in your case.
I'm a bit embarrassed here because I am trying to get content remotely, by using the client's browser and not the server. But I have specifications which make it look impossible to me, I literally spent all day on it with no success.
The data I need to fetch is on a distant server.
I don't own this server (I can't do any modification to it).
It's a string, and I need to get it and pass it to PHP.
It must be the client's (user browsing the website) browser that actually gets the data (it needs to be it's IP, and not the servers).
And, with the cross-domain policy I don't seem to be able to get around it. I already knew about it, still tried a simple Ajax query, which failed. Then I though 'why not use iFrames', but the same limitation seems to apply to them too. I then read about using YQL (http://developer.yahoo.com/yql/) but I noticed the server I was trying to reach blocked YQL's user-agent making it impossible to use this technique.
So, that's all I could think about or find. But I can't believe it's not possible to achieve such a thing, that doesn't even look hard...
Oh, and my Javascript knowledge is very basic, this mustn't help either.
This is one reason that the same-origin policy exists. You're trying to have your webpage access data on a different server, without the user knowing, and without having "permission" from the other server to do so.
Without establishing a two-way trust system (ie modifying the 'other' server), I believe this is not possible.
Even with new xhr and crossdomain support, two-way trust is still required for the communication to work.
You could consider a fat-client approach, or try #selbie suggestion and require manual user interaction.
The same origin policy prevents document or script loaded from one
origin from getting or setting properties of a document from a different
origin.
-- From http://www.mozilla.org/projects/security/components/same-origin.html
Now if you wish to do some hackery to get it... visit this site
Note: I have never tried any of the methods on the aforementioned site and cannot guarantee their success
I can only see a really ugly solution: iFrames. This article contains some good informations to start with.
You could do it with flash application:
flash with a crossdomain.xml file (won't help though since you don't control the other server)
On new browsers there is CORS - requires Access-Control-Allow-Origin header set on the server side.
You can also try to use JSONP (but I think that won't work since you don't own the other server).
I think you need to bite the bullet and find some other way to get the content (on the server side for example).
I would like to test out some interviewees by having them write some javascript that will make requests against my server. I don't want to give them write access to my code base. Javascript runs on the client side, so this should technically be possible. However I know there are browser restrictions that say that the javascript has to come from the server?
I apologize that this is a really dumb question, but how should I proceed?
Edit:::
Ok, so I failed to mention that the entire application is based off sending JSON objects to and from the server.
I think you're thinking of the javascript XMLHttpRequest object itself, in which case, yes the current standard is for browsers to block cross-domain calls. So, you can tell them to pretend they either have a separate proxy script on their own personal domain which will allow them to leap to yours, or to pretend they're building a page directly served from your domain. There's talk of browsers supporting trust certificates or honoring special setups between source and target servers, but nothing universally accepted AFAIK.
Javascript source itself does not need to come from the server, and in fact this is how you can get around this little XMLHttpRequest block by using json. Here's a simple json tutorial I just dug up from Yahoo. But, this calls for your server to provide a json format feed if your server is the intended target.
"there are browser restrictions that say that the javascript has to come from the server"
I'm not aware of any situation where that's the case, only a lack of a console. But...even in those cases there's the address bar and javascript:.
If I misunderstood and you're talking about cross-domain restrictions, then your server needs to support JSONP for the requests so they can make cross-domain calls for data.
You could POST the javascript to your server and then your server can send back some HTML that has the javascript inlined. Sounds like you're trying to set up something is, more or less, a homebrew version of http://jsfiddle.net/; AFAIK, jsfiddle just does a "POST javascript/CSS/HTML and return HTML".