How to call web services from another web app using backbone? - backbone.js

I am new to web dev.
I am working on a project (web app, running on jetty port 8081) which is supposed to call the web services from another web app, running on jetty port 8081.
How do I do that?

When you're running a server locally on your computer (like jetty), the root url is always localhost:portnumber
so if you have a web service running on port 8081, it can be accessed by connecting to the url http://localhost:8081
as for calling the services. Javascript offers AJAX (asynchronous javascript and xml) as a method to send and receive for example HTTP requests between the browser and the server. I suggest using jQuery's ajax implementation as it is nicely abstracted. In backbone.js the communication between the application and server is done with models and collections. Remember that backbone assumes you're running a RESTful web service serving up json.
UPDATE:
Because of the same-origin-policy of web browsers ajax can be normally used only to make calls to the origin of the site making the call (same protocol + domain name + port number). This can be circumvented in a controlled manner with for example JSONP, that instead of JSON returns arbitrary Javascript code. In jQuery's ajax, you can use JSONP to make requests to 'foreign' servers by setting the dataType as 'jsonp'.
Hope this helps!

Related

Quarkus REST API CORS configuration not working for consumer ReactJS app

I have a ReactJS UI that is served by a static NGINX web server and a Quarkus REST API server. Both are dockerized services, and the ReactJS app is supposed to use the Quarkus REST API to consume data/make requests. In the depiction below we can see this simple setup for my localhost dev enironment (both services are exposed and mapped to different localhost ports):
In the deployed production environment, these will services will likely correspond to different hosts/URLs. The problem is, even in the localhost setup i expectedly have the issue of CORS errors when i try to make calls to the REST API service from the ReactJS app running in the clients browser, e.g. during login:
I have to admit, i dont fully understand CORS in terms of where exactly one has to make changes/configs to allow them - but i was told i need to set them in the server i make requests to (which in this case is the Quarkus REST API). So i added this setting in the Quarkus app application.properties to just generally allow all requests:
quarkus.http.cors=true
(as shown in https://quarkus.io/guides/http-reference#cors-filter)
In reality i should probably change this to be more precise, however i still receive the same CORS error in my browser when running the react web app. I understand that i could also configure a proxy in the NGINX server to tunnel requests to the other service container potentially, but i would like to solve this through CORS configuration. Where do i have to make which configurations for this to work? Did i make a mistake with the Quarkus config?
It seems you cannot only set quarkus.http.cors=true for it to work and allow all requests, as per the Quarkus documentation. In my case i had to add more configurations, i.e.:
quarkus.http.cors=true
# This allows all origin hosts, should be specified if possible
quarkus.http.cors.origins=*
quarkus.http.cors.headers=accept, authorization, content-type, x-requested-with
quarkus.http.cors.methods=GET, POST, PUT, DELETE, OPTIONS

Forcing JS fetch to use non-https

I have an in-development ReactJS application that I run locally from my computer (on localhost). I have also set up local certs so that the application runs on HTTPS (https://localhost).
I also have a backend application located at an HTTP endpoint hosted in the cloud. Of course, the backend application will eventually be located at an HTTPS endpoint eventually, but that process hasn't been started yet.
I am trying to hit that HTTP endpoint from my local HTTPS ReactJS application by using fetch. However, something is upgrading the connection from HTTP to HTTPS automatically.
The only relevant information I have found on this is this post. I have tried the accepted answer (setting the referrerPolicy to unsafe-url) but that did not work for me.
Any other suggestions?

net::ERR_CONNECTION_TIMED_OUT from angular to nodejs in k8s

I am trying to make request to nodejs backend from containerized AngularJS frontend to nodejs.
Both are deployed in AWS using Kubernetes(KOPS). And I created service to access both.
For frontend type is LoadBalancer in k8s services and for backend, its ClusterIP. I can access frontend from browser using URL of the load balancer which "kubectl get services" gives me. But when frontend tries to make request to backend I am getting following error:
net::ERR_CONNECTION_TIMED_OUT or net::ERR_NAME_NOT_RESOLVED.
I checked using telnet etc, and app is running and can be accessed. Direct access to hostname works but doesn't work from AngularJS/NodeJS.
Your post was light on specifics, but if I understand correctly:
1. ELB -> Service -> Pod("http-server-serving-Angular")
2. ClusterIP -> Service -> Pod("nodejs")
Is that correct? because if so:
and for backend, its ClusterIP
Cluster IP addresses are, as their name suggests, only available within the cluster. You will want the backend Service to be of type LoadBalancer, also, so traffic that is not in the cluster can reach the nodejs app.
I'm cheating you with that answer just a tiny bit, because you can absolutely provision an Ingress controller and then leave the other Services as ClusterIP, but I would bet that's not the typical setup.
i think i found the problem. Here is the possible cause. I am using express.js for frontend which is hosted in nodejs. We wrote service which makes connection to backend host. This is not being served through http server and this is making connection being made from client's browser. I tried adding public ip to backend and it was working as expected. So possible fix it serve express/angular from nodejs web server.
This is not kubernetes question. I apologize for adding misleading tag.
Thanks for all the replies guys!
So this problem was wrong rule in nginx controller. My ingress has typo which was causing frontend to not recognize url. This issue is resolved.

Spring vs Angular js - Rest URLs getting exposed

I have a backend REST app. I'm presently developing the frontend app. Now i have a confusion as to how to setup the frontend app.
Case 1 - Plan to use Spring and have a frontend controller layer that takes care of calling the REST services. But i need to have models and POJOs setup same as in the backend to parse the JSON response. This seems like a overload on frontend. How to go around about this?
Case 2 - Plan to use Angular.js. Then i need to have all my REST URLs in the controller.js which is completely accessible for anyone. That way im totally exposing my REST domain, URL and request format. Is it not a security threat? How to go around about this?
Can you please tell me which case is better and secure and how to resolve the problem attached with it?
Secure your REST endpoints using a scheme like OpenId or OAuth or something else. Spring and numerous other web app frameworks have components to help with such authentication.
AngularJS is a client side framework. You can use Angular along with Spring. They are not mutually exclusive.
Finally, any http request (including RESTful http requests) invoked on a client is easily accessed simply by viewing the network traffic. Chrome, Firefox, along with other browsers provide tools, out of the box, that make this very easy to do. All the more reason to secure those REST endpoints.

How can I send cross site PUT requests through GWT?

I am creating a web application using GAE/GWT. Front end GUI is a web client and the server is a RESTFUL server both running in GAE in different domains.
I am using json with padding to communicate with the server but discovered I won't be able to send a PUT/POST/DELETE request.
My application will be used to mainly used to query data (query: 85% of cases, modify data: 15%). All requests will be authenticated.
I am considering the following options.
1) For querying use JsonpRequestBuilder, for modifying create a proxy in the web client server side and hit the REST service through this proxy. Use GWT RPC to communicate to this proxy.
2) Make every request as a GET request in my REST service (including those that modify data) and use jsonp directly from web client.
I would prefer option 1) but option 2) seems less work to do.
Should 1) be my preferred option ?
Are there any problems with 2) given all my requests will be authenticated. ?
Is there any other easy approach to solve this problem ?
Regards,
Sathya
The simplest solution is to use CORS which allows you to send requests two different origins. But it is not so widely spread (check caniuse), so if you have to support IE8-9, it will not be enough for you.
In your case I would try to implement dual solution (e.g. CORS + server proxy). If browser supports CORS - send the request directly to the target server, if it doesn't - send request via proxy.
Sorry to ask but what is the advantage to have your client running on a different domain ? From what I understand your client's server will do nothing ...
If you are not the "owner" of the REST backend, maybe this backend should developp an authorization system for third party applications, like oauth2.
Then your application can talk backend to backend with a secured connection. You can use scribe to do that on your backend.

Resources