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.
Related
I have react application where I want to add a request-id header to my requests, such that the frontend can tell the backend to undo a specific request. So requests (using superagent) are something like this:
let result = request(method, endpoint);
result = result.set("Accept", "application/json").set("Request-Id", getRequestId());
And when I add the ".set("Request-Id", getRequestId())" I get the error below.
I can see that I can send requests with postman with the request-ID header and I can see that the loadbalancer does not receive any requests other than options calls. CORS is enabled and exposing all headers for all origins.
Does anybody have ideas for what might be wrong? I'm quite new to frontend development.
The answer was I was that my corporate computer that has hardcoded in restrictions in the browser for not allowing custom headers. So I went in and found a standard header that in conjunction with the url could be used for the id so https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Date in my case.
Another evidence for this is that I could make post anything on my corporate computer on Facebook. Since the Facebook application uses custom headers.
my model (tf.keras.Sequential) was trained in Python, and I converted it into TF.js Layers format by using tfjs.converters.save_keras_model().
I created a server in folder (which contains *.bin files and a 'model.json'), using 'http-server' in cmd.
After that, I run this code to load the model:
(async () => {
const model = await tf.loadLayersModel('http://127.0.0.1:8080/model.json');
console.log('done');
})();
It doesn't work for me, these 3 errors appear in my console:
Access to fetch at 'http://127.0.0.1:8080/model.json' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
GET http://127.0.0.1:8080/model.json net::ERR_FAILED
Uncaught (in promise) Error: Request for http://127.0.0.1:8080/model.json failed due to error: TypeError: Failed to fetch
at tf.min.js:2
I have no idea how to fix it.
So this is an issue with CORS (Cross Origin Resource Sharing) - you need more than just simple web server to serve the files.
For any static files (like the bin and json files you have) that you want to use across domains on website etc you need to set the right header for those files by the web server so the browser knows its ok to use on such sites.
This is to do with web security across domains and whilst it catches a lot of folk out its important to have. Not sure what web server you are running but if you are using Express with Node.js then check this simple tutorial:
https://enable-cors.org/server_expressjs.html
or this lib:
https://medium.com/#alexishevia/using-cors-in-express-cac7e29b005b
Note the Allow-Origin part which is where you need to set the domain you plan to use it on. You can also use wildcard * to allow all domains if you want anyone to be able to use use those files on their sites too without issue.
Oh and fun fact, if you dont want to deal with a web server at all try Glitch.com which allows you to host experimental projects and upload assets if this is just for fun - it sets all the CORS headers correctly and is easy to use and prototype stuff on. https://glitch.com/#TensorFlowJS
I am trying to build a quick demo site that I do not have control over the server I am trying to connect to. Here is the code that I am using to build it with AngularJS. I am running the file through a simple Python HTTP Server and viewing it at localhost:8000.
var retrieveAppliances = function () {
console.log('Attempting to retrieve appliance list.');
var requestUrl = '****';
$http({
method: 'GET',
url: requestUrl,
})
.then(function (response) {
console.log(response);
});
};
retrieveAppliances();
I have read multiple places to try switching the method to JSONP but doing so resulted in a parsing error.
While I have considered trying to build a server.js file and running NodeJS with it, I am unsuccessful in learning the basics of making an AJAX request and proxying that to my app.js.
I will greatly appreciate any help that someone may be able to give me, with clear and easy to follow steps.
If you're running an Ajax call to a different origin (e.g. different host, port or protocol) and the server at that origin does not have support for cross origin requests, then you cannot fix that from your client. There is nothing you can do from the client.
If the server supported JSONP, you could use that, but that also requires specific server support.
The only solutions from a browser web page are:
CORS support on the target server.
JSONP (also requires support on the target server).
Set up your own server that you do have access to (either on your existing page domain or with CORS) and then have that server get the file/data for you and proxy it back to you. You can either write your own proxy or deploy a pre-built proxy.
Find some existing third party proxy service that you can use.
If you're interested in making your own node.js proxy, you can see a simple example here: How to create a simple http proxy in node.js?.
Currently, I'm working on a web app that requires me to connect to an external API to GET a JSON file.
The API in question that I'm using noun project which requires an Oauth1.0a authentication. Now this project requires me to use Angular.JS to handle JSON data.
But before I can work with the JSON I need to GET it, and this is where things fall apart.
I keep getting the following error on my http://localhost:8080/ when I try to connect with the following code.
The error :
> XMLHttpRequest cannot load
> http://api.thenounproject.com/icons/fish&callback=?&oauth_consumer_key=9c70…891xxxx&oauth_version=1.0&oauth_signature=xxxxx6oeQI0p5U%2Br0xxxxxxx%3D.
> No 'Access-Control-Allow-Origin' header is present on the requested
> resource. Origin 'http://localhost:8080' is therefore not allowed
> access. The response had HTTP status code 403.
> Blockquote
The code :
var oAuth = OAuth({
consumer: {
public: '9c704cb01xxxxxxxxx',
secret: '45b7a8d86xxxxxxxxx'
},
signature_method: 'HMAC-SHA1'
});
var app = angular.module('nounProject', []);
app.controller('apiController', function(){
console.log("check");
var request_data = {
url: 'http://api.thenounproject.com/icons/fish&callback=?',
method: 'GET'
};
// var token = {
// public: 'f5fa91bedfd5xxxxxxxxxx',
// secret: '84228963d5e8xxxxxxxxxx'
// };
$.ajax({
url: request_data.url,
type: request_data.method,
data: oAuth.authorize(request_data)
}).done(function(data) {
console.log(data);
});
});
The library I use to access OAuth in JavaScript is the following: https://github.com/ddo/oauth-1.0a#client-side-usage-caution (by DDO)
Can anyone guide me in the right direction, or has a better way to OAuth connect to an API with Angular.JS?
Thanks in advance!
The right way is client <-> server <-> oauth services
All the oauth steps should be in your server side.
Why? The simple answer is you can't hide your secret consumer/token at your client side.
I was having the same problem with getting client-side to work, the original is here No Authentication Pop up with Tumblr Like <a> link: but I'll just repost it for ease..
Found an answer!
So let me break it down for you all.. I am just going to run down all the issues and caveats that were discovered while I was hacking away at the Tumblr API. In most cases you will not find any of these answers on the inter webs. If you do, they most likely will just be my answers to my own questions that I posted to the Forums.
A Tumblr Application is defined by any page template either hosted by Tumblr or not that will be using the Tumblr API. Applications must be registered with Tumblr at: https://www.tumblr.com/oauth/apps
All Tumblr Applications upon creation are given a set of keys for accessing the Tumblr API. OAuth Consumer Key aka API Key Secret Key
The Tumblr API is divided mainly into two different types of methods. The third being “Tagged” which is for pulling tagged posts from the Blog or the User.
“Blog Methods” which only require the submission of the Consumer Key. “User Methods” which require a full OAuth signed request which meets the OAuth 1.0a Protocol. The “User Likes” returns a maximum of 50 records at a time. This is not documented in the Tumblr API docs.
Currently the Tumblr API documentation directs developers to use one of the many open source API clients. However, all these clients seem to be Server Side applications. For providers, such as Tumblr, which support only OAuth1 or OAuth2 with Explicit Grant, the authentication flow needs to be signed with a secret key that may not be exposed in the browser.
HelloJS gets round this problem by the use of an intermediary webservice defined by oauth_proxy. This service looks up the secret from a database and performs the handshake required to provision an access_token. In the case of OAuth1, the webservice also signs subsequent API requests.
HelloJS - http://adodson.com/hello.js/ is the only client-side Oauth library that was available and free. There are many services out there that charge on a per-api hit basis to serve as a proxy. The HelloJS OAuth Proxy is available at: https://auth-server.herokuapp.com/
Login to the OAuth Proxy is done using one of the following social account credentials: Google, Windows Live, Facebook, or Yahoo. OAuth Proxy serves as a secure “man in the middle” allowing for the “Secret Key” to be securely stored while still allowing for Client-Side OAuth authentication.
HelloJS features a special Tumblr Module - http://adodson.com/hello.js/demos/tumblr.html
HelloJS utilizes the new Javascript Promises asynchronous functions specification - https://www.promisejs.org/
Javascript Promises have some unique rules when it comes to passing objects received from an asynchronous AJAX call. With everything is done in the callback. What jQuery calls a promise is in fact totally different to what everyone else calls a promise. Hope this helps for future Tumblr integrations.
John
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