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
Related
How do you get data from a REST API with JavaScript. I have several basic API's that I would like to get data from that don't require any authentication. All of the API's return the data I want back in JSON. For example https://www.codewars.com/api/v1/users/MrAutoIt. I thought this would be a very simple process using xmlhttprequest but it appears the same-origin policy is giving me problems.
I have tried following several tutorials but they don’t seem to work on cross domains or I don’t understand them. I tried to post links to the tutorials but I don't have a high enough reputation on here yet.
If you are trying to access a web service that is not on the same host:port as the webpage that is issuing the request, you will bump into the same origin policy. There are several things you can do, but all of them require the owner of the service to do things for you.
1) Since same origin policy does not impact scripts, allow the service to respond by JSONP instead of JSON; or
2) Send Access-Control-Allow-Origin header in the web service response that grants your webpage access
If you cannot get the service owner to grant you access, you can make a request serverside (e.g. from Node.js or PHP or Rails code) from a server that is under your control, then forward the data to your web page. However, depending on terms of service of the web service, you may be in breach, and you risk them banning your server.
In fact, it depends on what your server REST API supports regarding JSONP or CORS. You also need to understand how CORS works because there are two different cases:
Simple requests. We are in this case if we use HTTP methods GET, HEAD and POST. In the case of POST method, only content types with following values are supported: text/plain, application/x-www-form-urlencoded, multipart/form-data.
Preflighted requests. When you aren't in the case of simple requests, a first request (with HTTP method OPTIONS) is done to check what can be done in the context of cross-domain requests.
That said, you need to add something into your AJAX requests to enable CORS support on the server side. I think about headers like Origin, Access-Control-Request-Headers and Access-Control-Request-Method.
Most of JS libraries / frameworks like Angular support such approach.
With jQuery (see http://api.jquery.com/jquery.ajax/). There are some possible configurations at this level through crossDomain and xhrFields > withCredentials.
With Angular (see How to enable CORS in AngularJs):
angular
.module('mapManagerApp', [ (...) ]
.config(['$httpProvider', function($httpProvider) {
delete $httpProvider.defaults.headers.common['X-Requested-With'];
});
If you want to use low-level JS API for AJAX, you need to consider several things:
use XMLHttpRequest in Firefox 3.5+, Safari 4+ & Chrome and XDomainRequest object in IE8+
use xhr.withCredentials to true, if you want to use credentials with AJAX and CORS.
Here are some links that could help you:
Understanding and using CORS: https://templth.wordpress.com/2014/11/12/understanding-and-using-cors/
4 jQuery Cross-Domain AJAX Request methods: http://jquery-howto.blogspot.fr/2013/09/jquery-cross-domain-ajax-request.html#cors (see "1. CORS (Cross-Origin Resource Sharing)")
Unleash your AJAX requests with CORS: http://dev.housetrip.com/2014/04/17/unleash-your-ajax-requests-with-cors/
Using CORS for Cross Domain AJAX requests: http://techblog.constantcontact.com/software-development/using-cors-for-cross-domain-ajax-requests/
Cross origin resource sharing cors AJAX requests between jQuery and Node.js: http://www.bennadel.com/blog/2327-cross-origin-resource-sharing-cors-ajax-requests-between-jquery-and-node-js.htm
Hop it helps you,
Thierry
Here is how you get data.
var request = new XMLHttpRequest();
request.open('GET', 'https://www.codewars.com/api/v1/users/MrAutoIt', true);
request.onload = function() {
if (this.status >= 200 && this.status < 400) {
var resp = this.response; // Success! this is your data.
} else {
// We reached our target server, but it returned an error
}
};
request.onerror = function() {
// There was a connection error of some sort
};
request.send();
As far as running into same origin policy... You should be requesting from an origin you control, or you can try disabling Chrome's web security, or installing an extension such as Allow-Control-Allow-Origin * to force headers.
For a get method you could have something like this:
#section scripts{
<script type="text/javascript">
$(function()
{
$.getJSON('/api/contact', function(contactsJsonPayload)
{
$(contactsJsonPayload).each(function(i, item)
{
$('#contacts').append('<li>' + item.Name + '</li>');
});
});
});
</script>
}
In this tutorial check the topic: Exercise 3: Consume the Web API from an HTML Client
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.
TL/DR:
MSDN azure articles refer to going to the "Configure" section of the https://manage.windowsazure.com/ mobile services settings to add other URLS to CORS. It seems it isn't there anymore - any idea where it's gone?
The longer story for background:
Trying to follow this article:
http://azure.microsoft.com/en-us/documentation/articles/mobile-services-html-how-to-use-client-library/
and this linked one:
http://azure.microsoft.com/en-us/documentation/articles/mobile-services-html-get-started-data/
I have followed the article and created an azure mobile service with a sql server database (and 1 simple table in it.)
I then try to connect to it on my web server (localhost:8000/) with the js code:
var MobileServiceClient = WindowsAzure.MobileServiceClient;
var client = new MobileServiceClient('https://myappnamehere.azure-mobile.net/', 'mykeyhere');
I then make a call to query some data:
var table = client.getTable('mytablename');
var query = table.where({
complete: false
}).read().done(function (results) {
console.log(results);
}, function (err) {
console.log(err);
});
And the where call runs the error callback with the message:
"XMLHttpRequest cannot load
https://myappnamehere.azure-mobile.net/tables/tablename?$filter=(complete%20eq%20false).
No 'Access-Control-Allow-Origin' header is present on the requested
resource. Origin 'localhost:8000' is therefore not allowed
access."
I'm guessing this is because although localhost is meant to be allowed in the server side CORS settings localhost:8000 isn't.
Trouble is, both articles above refer to going to the "Configure" section of the https://manage.windowsazure.com/ mobile services settings to add other URLS to CORS. It seems it isn't there anymore - any idea where it's gone?
All the other articles I look for talk about setting it in your config file etc. but the point is I don't want to push code to the server-side. That 1st article definitely implies that I can just create the service and the sql server table and then talk to it from javascript client-side (presumably automagically through the use of OData.) That is possible right or is that part of the article completely wrong too?!
If you're using the JavaScript (node.js) backend, then you'll see the list of cross-origin resource sharing (cors) domains. On the .NET backend, the support isn't baked in yet, but you should be able to add it by following the instructions to enable CORS for Web API (after all, the .NET backend is built on top of that platform).
Since you're accessing your service at localhost, I'm assuming that you're using the .NET backend, which is why you won't see the list of CORS domains in the portal. The integrated support should be coming in soon, but before that you can add the support manually as described in the document linked above.
Ok, so basically.
I inject some javascript code into a web page and it uploads an image on that page to another server.
Now I have it working when I run it on my domain (of course), but I need to post the multipart/form-data request to a PHP file that I do not own.
Since it is a upload and not a simple request to just get data, I cannot use jsonp in the initial call since the response would not be in json.
Using James Padolsey's cross domain script, I am able to do $.get and $.post request across domains, but since I am using $.ajax it does not work.
He uses the Yahoo Query Language to acomplish this
This is basically how I am making the request
$.ajax({
url: 'http://website.com/upload.php',
type: 'POST',
contentType:'multipart/form-data',
data: postData,
success: successCallback,
error : function(XMLHttpRequest, textStatus, errorThrown) {
console.log('Error');
}
});
I want to make it completely JavaScript based to avoid making my server do the request.
So to re-cap, I can get the image bytes and make the request with javascript. But so far I cannot make it cross domain since I am $.ajax to set the content Type to "multipart/form-data".
Is there another way to make the request cross domain with or without the YQL?
Making the request with an iframe will not work since the domain of the iframe would change and I would not have access to the response.
This is a well known and difficult problem for web development, know as the Same Origin Policy
Javascript prevents access to most methods and properties to pages across different origins. The term "origin" is defined using the domain name, application layer protocol, and (in most browsers) port number of the HTML document running the script. Two resources are considered to be of the same origin if and only if all these values are exactly the same.
There are several ways around this.
Create your own proxy
Create a page that simply forwards the request to the other server, and returns its response
or, Use Apache's rules to form a proxy (see above link)
Use someone else's proxy
For GET requests which are typical Use YQL to access yahoo's proxy
For POST requests, if the 3rd party supports Open Data Tables
or, Use some other public proxy
See if the 3rd party conforms to the CORS specification
Cross domain POST query using Cross-Origin Resource Sharing getting no data back
If you are willing to allow a little flash on your page, try flXHR
it claims to implement the exact XHR api and also has a jquery plugin
These are pretty much your only options
In my javacript function I call this ajax. It works fine but only when I access the web page from firebird server. I have the same code on my testing server. The ajax asks to download some files but only firebird server has its ip registers with our clients to be able to scp there. I need to do the same if I access the php files from testing server. All the servers are inside intranet.
is it possbile to use dataType text to do so?
do I need to do any changes on the server side?
ajax call:
url = "https://firebird"+path+"/tools.php?";
jQuery.ajax({
type: 'get',
dataType: 'text',
url: url,
data: {database: database_name, what: 'download', files: files, t: Math.random() },
success: function(data, textStatus){
document.getElementById("downloading").innerHTML+=data;
}
});
Update 1
My little web application restores databases so I can do my testing on them. Now I want to enhance it so I can connect to our customers and download a particular backup. Our customer allowed only firebird server to connect to their networks. But I have my own server dedicated to testing. So every time I want to download a database I need to connect firebird. The source of my web application and the folder with all backups are mounted into the same location on both servers firebird and testing. Right now my solution (for downloading) works but only from firebird. I work basically only testing server though.
Update 2
I make two ajax calls. One is pure jQuery call (I guess I can apply any solution to this one) and the other one is ajax call from jsTree. I created new question for that one. I seems to me that I have to go for #zzzz's option b).
To do cross domain requests, your options are fairly limited. As #Mrchief mentioned, you could do server side proxy and jsonp.
Another option is Cross-Origin Resource Sharing (CORS), a W3C working draft. Quoting from this blog post:
The basic idea behind CORS is to use custom HTTP headers to allow both
the browser and the server to know enough about each other to
determine if the request or response should succeed or fail.
For a simple request, one that uses either GET or POST with no custom
headers and whose body is text/plain, the request is sent with an
extra header called Origin. The Origin header contains the origin
(protocol, domain name, and port) of the requesting page so that the
server can easily determine whether or not it should serve a response.
You can find some live examples on this site.
You will need to make changes to the server side, to accept the CORS requests. Since you have control over the server, this shouldn't be a problem. Another downside with CORS is that, it might not be compatible with older browsers. So, if some of your essential audiences use incompatible browsers, the server side proxy may actually be a better option for you.
I just want to offer an alternative.
I am not too sure regarding your network setup, but if you have access to the DNS, maybe it would be easiest if you just give your servers some arbitrary subdomain of the same domain. Something like www.foo.com for the webfront and firebird.private.foo.com for the firebird server. This way, it becomes cross subdomain instead of cross domain. Then somewhere in your JavaScript on both pages,
document.domain = "foo.com";
This gentleman achieved this solution here.
You have the following options with you
a) You use jsonp type as your datatype but this involves making changes on the server side to pass the data back as json and not as txt.. this change might be as simple as
{
"text":<your current text json encoded>
}
and on your js side you use this as response.text; Having said that if you are getting the textis for you file from sm other domain I am not sure how easy it is for you to change the code.
b) The other option is you write a handler/end point on your server i.e within your domain that will make an HTTP request to this third domain gets the file and you send the file back to your client and effectively now your client talks to your domain only and you have control over everything. as most of yoyr questions are based on ruby here is an example:
req = Net::HTTP.get_response(URI.parse('http://www.domain.com/coupons.txt'))
#play = req.body
you can find more details about the same here.
Hope this helps.
Another idea is to use you web server as a proxy. You will need to consider the security implications for this route.