CORS Angular JS - javascript

I'm a beginner learning node and angular but running into many issues. I have Angular running on Node, and my code in Angular makes http requests to retrieve json from an API on another web server (this web server is something I add routes to and I'm not allowed to enable CORS on it). I'm getting 'CORS blocked' due to my http request although I know this resource is accessible. I understand that you have to enable CORS in the web server but in this case that is not an option. There is another web app (not running on the same origin as the resource) that is doing a similar thing to mine but instead he uses node to retrieve the json data and then I think he sends that to angular to process. Is this a possible work around?

Yes it is. If you can't enable cors headers on the server then the only thing you can do is access the server from your nodejs or any other type of server. If you eventually plan to run your angular in cordova you could make a direct $http request because cordova does not block corsable requests.

Related

Connect nodejs to a endpoint status page

I'm currently making a webpage that will show the status of the endpoints of my api. I have little background in nodejs. The webpage is simply a table that has the endpoint name and shows red/green/yellow box. I had some problems using ajax because of the cross-origin header. I was using the XMLHttpRequest.
Now I will try to do is creating a nodejs server that can fetch this information but I'm having some problems understanding if I need to use express in order to create an app or can I use the 'request' library.
Im kinda confused on how to connect my frontend with a nodejs backend.
Typically you connect your front end to a nodejs background the way you connect most client apps to an api, through an Ajax request (XMLHTTPRequest). If you want real-realtime then you would use sockets so you can push updates to the page. If slightly realtime is ok, then you can poll from the client every 5-10 seconds.
You mentioned CORS. If you are trying to access an API that doesn't set cross-origin header, then you proxy requests through your express server since CORS is a browser policy.
Without more information I can't be more specific.

Consuming REST service with Ajax - Same origin policy

I'm writing my first Knockout Js application and I'm stuck trying to make an ajax request to my service (I'm new to web development in general).
I already found out that the problem is same-origin policy, and the reason I'm getting blocked by this I think has to do with my development setup: I'm using WebStorm to write my html/js and launching the page with its built-in webserver, which serves at port 63342; and my REST service is self-hosted, written in go, and running at 8080.
When the application is finished, I'd like to serve both the REST api and the Web app from my go server, but while developing the WebStrom server is really convenient.
Do any of you guys have similar problems? How do you work it out? Should I try to serve everything from my go server even during development? My server is not ready to serve any static content yet. Or should I try to use PJSON, even though I don't think I need it in my final app?
This is the error I get in my chrome develoment tools:
XMLHttpRequest cannot load http://localhost:8080/lines/03/pos. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:63342' is therefore not allowed access.
You could CORS-enable your REST service, and make sure that your web app is sending CORS request headers.
I'm not proficient in either Go or WebStorm, but I recommend investigating CORS.
https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS
Turns out it took only a couple of lines of code to serve static content from my go server, so I just did that and now everything is working fine.
Thanks for your help though!
Best regards

Consume remote rest services in AngularJS app

I would like to consume two remote REST services (which I don´t have control over) from my AngularJS app.
Service 1: To authenticate myself by passing the credentials as form-data in the HTTP header using POST verb.
Service 2: To get the data in JSON format by using GET verb.
Using the $http or $ngResource leads to same error message in Chrome Developer console:
OPTIONS http://remote.service.com
net::ERR_EMPTY_RESPONSE
Example on $http GET
$http.get('http://remote.service.com').
success(function(data) {
$scope.greeting = data;
});
I believe this is because of XSS limitations in JavaScript? I have considered solutions like CORS (requires control over the remote service) and JSONP (only GET) but none of these will solve my problem so Im seeking tip on other solutions.
What I don´t fully understand is why calls to the very same services works fine when using REST Client Plug-in in Chrome (for instance POSTMAN) from my local machine.
Im running Express and NodeJS in the backend, if that might help.
In stead of calling the remote REST service directly from the frontend app (AngularJS app), call the backend service within same origin and from backend do the remote service call (as a proxy). This solves this issue.

How to test GET/POST or better way?

I am writing an app that will send POST/GET requests from a remote client to a server. As a way to test and also educate myself I was trying to make these requests by writing a simple html file that resides on my desktop with a form that would POST to a server side php file. I also tried using ajax style requests or XMLHttprequests independent of and connected to a form but I received an error in the console:
Cross Origin Request Blocked
For all attempts form or no form. I have read that this is because I am making the request from FILE:// and this is not allowed by browsers unless CORS is enabled in some way. I have also read that using a webserver to host the file might fix the problem but I don't understand what is meant by webserver (separate or same domain? lamp, xammp, mamp?) and I am not interested in overriding security (allowing cors with headers) if I am eventually going to have to find a secure way when it goes live anyway.
As I said I am really just trying to test and I would like my html files to communicate with the server-side php from another machine instead of just putting all files together in the same domain/folder. Is there a way to do this using html/javascript or Websockets or anything html5 has to offer that might be useful?
code examples are welcome but if anyone could help me grasp this concept better it would be greatly appreciated. I am a noob XD
I am open to a better approach entirely if one exists, the only constraint I have is that everything on the UI/Client end is going to be written in html/javascript but I can utilize either or both intel XDK api and Cordova api as well.
Please help and thank you.
If you need to send some HTTP requests to test the server-side of your app I would strongly recommend you use an HTTP client like Fiddler:
http://www.telerik.com/fiddler
Also, read this:
GUI HTTP client
A desktop-based client will have a nice GUI with plenty of features to tweak, save, send, resend your requests.
One thing you can do is use pythons SimpleHTTPServer to serve the html file. Then when you go to your browser and go to 127.0.0.1:8000 the origin will be the same.
You can run the server by going into the directory that has the html file and running the command python -m SimpleHTTPServer 8000. This will serve the content of that directory on port 8000 and it should allow the requests to be made without a CORS exception.
Heres the documentation https://docs.python.org/2/library/simplehttpserver.html
I recommend that you disable the same-origin policy in your browser in order to test cross domain AJAX request from a local file.
For example, with Google Chrome on Windows you can disable this by launching chrome with the following command :
C:\Users\YOUR_USER\AppData\Local\Google\Chrome\Application\chrome.exe --allow-file-access-from-files --disable-web-security
Together, both of these flags will allow you to test cross-domain ajax requests from a local file. These flags are relevant across Mac, Windows and Linux.
This is not on how to write the requests but you can bypass writing those if you are using the latest version of the Intel XDK. If you go to the services tab in the latest version of the Intel XDK, there is a service by the name of Sandbox Explorer. It has a GET and POST method UI. Just plug in the URL and you will see the response immediately. You can use this to debug the server that you are writing. Once you have the server returning the right response, create a data binding to use the GET API in your client side javascript or html code. Cross origin is taken care of.

How to make a request to sails.js controller without using sails.io client helper methods

I'm developing an application using sails in which I have to connect from external sources. they can be IOS or android mobile applications or simply an external html client.
In that regard I cant't use sails helper methods to make web sockets request be handled by controller actions.
as I read through the sails.io client file i figured I could just use.
socket.emit('get' , {url:'/tomato' , data:{message:'pony'}} , function(response){});
to mimick the sails socket.get() function but it is not working.
sails log in terminal shows the following message : No session data returned, and an error was encountered saving session data for the first time: undefined.
Sorry you had to give up! This is a fairly common issue that comes up around communicating via sockets with a 3rd party. It actually has nothing to do with the Sails helper functions, and your usage of socket.emit to replicate the socket.get functionality is perfectly valid . Unfortunately the error message for this case is (clearly) broken in Sails v9, but the gist is: you need to get a cookie from the 3rd party domain before you connect the socket. This means making a JSONP request to that domain. Socket.io can actually do that for you, although you may have to set io.util.ua.hasCORS = false manually before calling io.connect. Or you can create a JSONP endpoint on the remote server and hit it yourself. Either way, once you have that third-party cookie in place, the socket handshake should work fine and allow perfect communication between your site and the Sails server.
Edit
The io.util.ua.hasCORS method is not valid, as it turns out--it will cause a JSONP request to be made to the remote server, but the response won't have a cookie attached so it's not going to get the job done. However, when the next version of Sails is released it will include a mechanism to request a cookie from the external domain, and will handle the connection automatically in the background within sails.io.js. Also note that you need to set authorization to false in the /config/sockets.js file in your Sails app in order to allow sockets to connect from remote domains.

Categories