I am trying to use $.getJSON with a local app calling another local app on a different port.
For example my app is running on localhost:3000, but I want to make a $.getJSON call to another app running on localhost:3001, in firebug it returns red with a 200 response, but with no data in the response. Is there a way to do this? I tried this....
$.getJSON('http://localhost:3001/dashboard/widgets/marketing_efficiency_gauge.json',
{ key: 'value' }, function(data){
alert(data)
});
Edit: for clarity there are two rails apps involved one on localhost:3000 another on localhost:3001
Second edit: here is the json response for localhost:3001 when I hit it with a browser (say firefox) https://gist.github.com/willfults/7665299
The Same Origin Policy prevents JavaScript scripts from making HTTP requests to different domains. For the purposes of SOP, a URL with the same hostname but different ports (as is the case here) is still considered to be a different domain, and hence requests are not permitted.
What typically happens in such cases is that the browser actually does make the request over the network, but drops the response and sends an error result to the JavaScript.
To fix this, you'll need to implement Cross-Origin Resource Sharing on the localhost:3001 service. In a nutshell, this entails adding a Access-Control-Allow-Origin header to responses listing the domains which are permitted to make cross-domain requests to the service. That is, in this case adding a Access-Control-Allow-Origin: localhost:3000 header to the response from the localhost:3001 service should allow things to work as you expect.
Incidentally, this is why the browser makes the request but drops the result: it needs to request the headers from the server in order to determine whether the JavaScript is allowed to make the request or not (i.e. it needs to check if there's a Access-Control-Allow-Origin header in the response). Why a HEAD request isn't sufficient, I don't know.
The other alternative is to use JSONP. This is potentially simpler to implement on the server side, but has the disadvantages of only working for GET requests, and requiring slightly trickier coding on the client side.
Related
So I have been developing a webpage the would give random quotes whenever a user clicks on a button by calling an API.
Please refer to my previous question for more information Not able to get values (quotes) from the API using jquery
I was told that the reason I couldn't get the response from the API is because my ACAS(Access-control-Allow-Origin) is not set properly in my server and I have to debug it.
Now that I don't much about ACAS or CORS. I have some questions. SO here they are:
1. What exactly is ACAS and how is it related to CORS?
2. How do I debug my page and set the ACAS?
3. Does that have to do anything with my jQuery? Or should I configure only my browser.
You can find many documents on the internet
,so I'll just briefly talk about CORS.
When you're sending request to different domain
for example from a.com to b.com, or localhost:8080 to a.com......
your're making a cross-origin HTTP request ,
sometime this is not allowed, for example Ajax (as you're doing) requests.
Because XhttpRequest, Fetch (both are Ajax API) follow same-origin policy, which means by default you can only make requests form the same domain, ex: from site.com to site.com/users.
The reason they follow the same-origin policy is to prevent CSRF attack (Cross-site request forgery).
1.So basically you cannot get the result of cross site Ajax request, it will block by browser because of the security issue, unless the response header Access-control-Allow-Origin is set to allow client's site to send cross site ajax request. ex: Access-control-Allow-Origin:*allow all sites form different domain; Access-control-Allow-Origin:www.b.comonly allow www.b.com domain.
2.Take Chrome for example If the cross site request's result is blocked, it will show on browser's console:
You need to set the response header in your server, for example I set Access-control-Allow-Origin:*, then in browser's "network" console you can see the header is set, and now I can get the Ajax result.
I think nothing should do at client side, all is at server side.
Refer to this post as it makes this clear
Note also that there are some techniques frequently used in order to bypass CORS like setting up a proxy which acts as a relay for your request or using JSONP instead of JSON.
I want a simple javascript script that exists on my localhost to make a connection to another domain(eg: anotherdomain.com) with ajax and get the response , but all my browsers tell me that error of (connection blocked , Reason: CORS header 'Access-Control-Allow-Origin' missing)
but when I check the network traffic with network monitor program like (fiddler), I see that the response already came from the server at (anotherdomain.com) to my local machine , it is just my browser who is blocking me from getting it !!
1- can I order my browser to ignore the CORS rules using javascript code?
2- what is my options to overcome this problem? is building a custom client disktop application with c# to send and receive requests freely is the best way to do it?
3- is CORS policy designed to protect the web clients or the web servers ?
thank you, and please consider that I'm complete newbie in web
but when I check the network traffic with network monitor program like (fiddler), I see that the response already came from the server at (anotherdomain.com) to my local machine , it is just my browser who is blocking me from getting it !!
Well for sure, the connection was estabilished to check the presence of the header you mentioned, but data was unlikely to be transferred.
Regarding your questions,
There are 2 options actually. One is to set the Access-Control-Allow-Origin header with proper origin according to yours. The second is to make a JSONP call, though the response of server must support such a solution.
The best option is to have a server with the above header specified. Your server would handle all the network stuff on its side and your script would just get/send some responses/requests.
I would say it designed more to protect the server. Imagine the following situations. Your script on your site makes a lot of POST requests to the another site. Actions like submitting forms etc. could happen and would be allowed. That's harmful, right? You can read about that in this stack question.
This is a concept that I thought I understood, but recently found out I had all wrong. I've looked all around the internet and find plenty of examples of small details and code snippets, but I still lack an understanding of what it prevents and why it prevents it and for whose sake. So this is more of a request for a high-level explanation than a question.
Anyways, here's what I THINK I understand about it:
Let's say I have domain A.com and domain B.com. Each on their own apache servers with their own IP addresses.
I load an html file from domain A.com into a browser. The browser executes a POST XMLHttpRequest to B.com/doStuff.php, which fails because the same-domain-policy was set.
So:
Who's same-domain-policy is relevant? I think the answer is B.com/doStuff.php's... right? So when A sends the request, B checks the request headers for an origin and says "whoops, different domain, won't listen to you". Or does A send the request, B responds with headers that specify "same-domain-policy", and then the browser checks that because same-domain-policy was specified, and the domain from the headers of the A request don't match the one from the B request the BROWSER refuses to send out the xhr?
If that's the case, it seems that the point of not allowing cross-origin-requests is because "I don't want anyone other than me accessing my API". Is that all? Because wouldn't you want to solve that with some kind of authentication instead? Couldn't someone just construct an HTTP request with a fake origin header (simply lie)?
Or is this somehow supposed to protect the user? If that's the case, how is preventing them from calling your API ever going to protect anyone?
I'm so confused...
Who's same-domain-policy is relevant?
The server receiving the request decides.
... the BROWSER refuses to send out the xhr?
No, the server refuses to respond. To be more exact, in modern browsers it is done by preflighted requests. It means that for each cross-origin request, first an OPTIONS request is sent automatically by the browser whose headers are the exact same as the intended request will have but with no request body. The server responds also with headers only. Access-Control headers in the response will let the client browser know whether the request would be fulfilled according to the server's policies. In a sense the browser is preventing the request, but only because it already exchanged a request/response pair with the server and knows that there would be no point to attempt the request. If you forge a request in such a case, the server will still deny serving it.
The idea is that you don't want to access server b from server A via Javascript. If you're interacting with an API, you would use javascript to make a call to your own server's backend code, which would then make a call to the other server.
I am working on a web app that makes several ajax requests at startup. The applications works fine when ran individually, in the browser.
When running it into a iframe, one of the ajax requests returns a 302 Found HTTP status. I'm sure I'm hitting the same url with both the browser and the iframe.
The application that creates the frame is on a different domain and port.
What could be causing this? Out of 5 get requests to the same server, only one (the third) gets a 302.
The application that creates the frame is on a different domain and port.
That's why. You're making a cross-domain AJAX request which isn't allowed without special considerations.
You need to set up CORS on the server-side to allow this. See https://developer.mozilla.org/en-US/docs/HTTP_access_control
Why are my AJAX requests failing? I have a website
www.foo.com, and I'm running Tomcat on the same server, www.foo.com:8080/services. However, when a file on foo.com makes an ajax call as such:
$.get("http://foo.com:8080/services/action.do", null, myCallback );
I get an error response, rather than the xml document I get if I manually browser to the url given above. What could be going wrong here?
As Tomcat is running on a differemt port (8080 as opposed to 80) it's regarded as a different origin, so you're running into the same-origin policy:
Mozilla considers two pages to have the same origin if the protocol, port (if one is specified), and host are the same for both pages.
(My emphasis).
Although this comes from the Mozilla docs, the policy is implemented the same way in all browsers - well, all browsers that are safe to use ;-)