I'm trying to use Angular to get two responses.
One, a response if the website uses green energy
Two, what are alternatives to this website.
app.controller('QueryController',['$http',function($http){
var site = this
site.green = []
site.alternatives = []
$http.get('http://api.thegreenwebfoundation.org/greencheck/' + 'www.apple.com').success(function(data){
console.log(data.result);
});
$http.get('http://www.similarsitesearch.com/api/similar/' + 'www.apple.com').success(function(data){
console.log("it worked");
}); }]);
As you can see both of these links provided JSON. But when I try to run this I get the following error:
XMLHttpRequest cannot load http://www.similarsitesearch.com/api/similar/www.apple.com. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.
I'd love any advice on the correct way to do this, thanks!!!!
This looks like a cross domain issue. Your browser will prevent ajax requests to other domains for security reasons.
You can research if these sites support CORS or can be fetched using JSONP. There are however some security concerns with JSONP especially if you are dealing with third parties.
Another alternative is to setup a reverse proxy on your own domain that makes the cross domain request.
Related
I use an API that is on a different server and i got an CORS error I think. The strange thing is that it first worked with no problem, then i got this error message
XMLHttpRequest cannot load http://www.thecocktaildb.com/api/json/v1/1/random.php? tagmode=any&type=POST&format=jsonp. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'myadress.com' is therefore not allowed acces
i added crossDomain: "true" and it worked for a day. Now it doesn't work again and i've searched and tried a lot of solutions i've found. But nothing works. What is the problem and how do i fix it? Tried jsonp instead of json with and without type:post and the &callback=? does nothing. I've even installed the CORS enable extension for chrome. But alwways the same error, I have no control over the API itself or the server hosting it. How can I fix this? Below is my code.
function random() {
$(document).ready(function () {
$.getJSON("http://www.thecocktaildb.com/api/json/v1/1/random.php", {
tagmode: "any",
type: "POST",
format: 'jsonp',
crossDomain: "true"
}, function (data) {
console.log(data);
var result = "";
$.each(data.drinks, function (index, value) {
result += "<p>" + value.idDrink + "<p>";
result += "<p>" + value.strDrink + "<p>";
});
$('#result').html(result);
console.log(result);
});
});
}
I think you can make some modification for bypass CORS error. but target environment can also block CORS request. When I used Paypal checkout, I encountered same problem. Paypal environment doesn't accept CORS request.
So that you can try to make this call over server side.
If I understood it right you are doing an AJAX call to a different domain than your page is on. So the browser is blocking it as it usually allows a request in the same origin for security reasons. You need to do something different when you want to do a cross-domain request. A tutorial about how to achieve that is Using CORS.
Regular web pages can use the XMLHttpRequest object to send and
receive data from remote servers, but they're limited by the same
origin policy. Extensions aren't so limited. An extension can talk to
remote servers outside of its origin, as long as it first requests
cross-origin permissions.
Solution :
For allowing access to specific domain only:
response.addHeader("Access-Control-Allow-Origin", "http://www.thecocktaildb.com");
Check this blog post.
I'm using JQuery:
$('#myDiv').load('myApp/url',function(){ });
and it's giving No 'Access-Control-Allow-Origin' header is present on the requested resource By chrome, and firefox so far , any straight forward answer on how to fix this . I don't have control over server to make any configurations and I'm using PHP
This is a CORS issue (Cross Origin Resource Sharing), you are trying to request content via ajax from two different domains. Unless the domain from where you want to grab the data has properly set the CORS headers, browsers will cancel the request right away.
This occurs due to the communication between two different domains. The domain that will server your data, should have some headers set, this headers act as permissions, they tell which domains are allowed to ask for data from it, and which verbs/methods are allowed.
You can read more about this here and here
No, there won't be a straight forward answer to this because it will depend entirely on your system/server setup, and what you have access to. Here's what you need to know.
In the beginning -- AJAX requests had a very strict "same origin" policy. This meant if you made an ajax request FROM a website with the domain example.com, you could only make a request to a URL that was on example.com.
In more recent years browsers have loosened up on this. If the server that you're making a request to has an Access-Control-Allow-Origin header, and that header includes the URL/domain of the server you're making the request from, then the request will be allowed. Similar question/answer here.
So, how you set this header depends on the server you're making a request to. If you have control over this server, start your Googling there.
If you don't have control over this server, you need to make a request to php page on your server, and this PHP page should make a curl request to the server that had the information you don't. A curl request, happening outside the browser, isn't subject to the same cross domain issues.
The easy way is to do this by hand:
var script = document.createElement('script');
script.src = uri;
script.id = 'scriptid';
document.head.appendChild(script);
It may be some browser compatibility issues, but you get the power of CORS with no 'Access-Control-Allow-Origin' error
I'm getting the following error while requesting get method in Angular js
XMLHttpRequest cannot load http://localhost:29527/Services/ProfileService.svc/ChildList?ParentId=37. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:63342' is therefore not allowed access.
This is my code
app.controller("AppCtrl", function($http) {
var app = this;
var config = {
headers: {
'Authorization': 'Basic d2VudHdvcnRobWFuOkNoYW5nZV9tZQ==',
'Accept': 'application/json;'
}
};
$http.get(childList,config)
.success(function(data) {
var carsFromServer = JSON.parse(data);
console.log(data.getChildrenResult);
});
});
Short story
In the beginning websites could load data from another websites. But soon people understood that it's very dangerous, as hackers could steal cookies from other sites. So CORS(Cross-Origin Resource Sharing) standard was introduced, it doesn't allow websites to load data from different domains. But still it can be configured.
Your question
Your url http://localhost:29527/Services/ProfileService.svc/ChildList?ParentId=37 seems a wcf service, which probably is self hosted, but you cannot use it for cross-domain-origin requests, until you implement such functionality as described here and host wcf in webserver. Enabling CORS in wcf sometimes brings lots of troubles, as wcf is very limited by default, even not possible in some conditions. Just because wcf doesn't understand http requests, and cuts a lot of header information. link provided before should temporarily solve, but...!
Recommendation
Make WebApi site with service references to your wcf service, add everything you need( routes, controllers, actions) and implement CORS there as it's done by applying attributes to the controllers(very easy). So you will end up with 3 projects (wcf service, asp.net webapi, angularjs website). Or better use angularjs backed as webservice of wcf. But having separate webapi server will be flexible, as you might want to make mobile versions, or just mobile native apps, or whatever you want. It will serve everything
hope helps. sorry for english
It's because http://localhost:29527/Services/ProfileService.svc/ChildList?ParentId=37 Has no Access-Control-Allow-Origin header present. This causes XMLHttpRequest to fail, since origin http://localhost:63342 (where your html is) is not allowed to read data from another origin.
Have you actually looked at the error message?
Try with $http.jsonp instead of $http.get check out https://docs.angularjs.org/api/ng/service/$http#jsonp
I am trying to get the register numbers of the people who scored 'S' in a certain subject from a website from the localhost.
But i am getting this error
XMLHttpRequest cannot load http://sas.sastra.edu/result2013/index.php. Origin http://localhost is not allowed by Access-Control-Allow-Origin
for(i=115003001;i<115003230;i++)
{
$.post("http://sas.sastra.edu/result2013/index.php",{regno:i},function(data,textstatus,obj){
if($(data).find('tbody tr:nth-child(2) td:nth-child(2)').text().slice(60,62)=="S")
{
console.warn(i);
}
},{dataType:"HTML"});
}
Please Comment if i am not clear.
Simply said http://sas.sastra.edu does not allow you to make a cross domain httprequest.
Ajax requests are limited by the browser's Same Origin Policy. This means that you can't talk directly to a server via ajax that isn't on the same domain as the page your script is running in. So, unless you're developing a page for google.com, you can't talk to google.com directly httprequest.
Making Either make sure they though or try doing a JSONP call is probably what you need to do here if the API you're attempting to use supports it.
Read more about jsonp here: What is JSONP all about?
I by chrome->Inspect element->console get this error:
XMLHttpRequest cannot load. Origin is not allowed by
Access-Control-Allow-Origin.
What is this resolved?
You cannot issue requests through the XMLHttpRequest to other domains or subdomains.
If you are issuing the request from www.foo.com you also need to target the request at www.foo.com and not leave out the www.
If you really need to hit another domain you can use JsonP where the browser utilizes the <script> tags ability to load scripts from a different domain. The loaded script then executes a callback function to give you the data. But for regular AJAX calls you cannot leave the source domain at all.
See the Wiki article on Same Origin Policy
one work around is using Korz which routes all cross origin requests through a third party and sets Access-Control-Allow-Origin header to '*' so the request goes through.
I recommend you to read this:
http://www.fbloggs.com/2010/07/09/how-to-access-cross-domain-data-with-ajax-using-jsonp-jquery-and-php/
It is very wel explained... the whole point is that you need to return your JSON in a callback-function way