Cross domain issue - api different domain than frontend - javascript

I am not familiar with this issue and I hope you can help.
I am developing a web application. My Backend api endpoints sits under http://www.example.com/api where my front end application located in http://www.otherdomain.com.
The problem is that I get cross domain problems when I am trying to make ajax requests.
I am using AngularJS in the frontend and RoR (rails) on the backend.
Do you have any idea how to fix it?

For security reasons browsers are blocking ajax request for another domain(you can read here). But you can try to use $http.jsonp()

We encountered this several times before in our PHP & Java Backend Api's. But our solution was always to include this to your api server header: Access-Control-Allow-Origin "*"

The best solution would probably be to set a reverse proxy using nginx so that the requests can be received by a local server, on your local domain, and reverse-proxied to the destination server exactly as they were received (CORS limitation do not apply on servers).
Another solution is this neat Javascript proxy:
https://github.com/jpillora/xdomain

Related

Can Angular views and html use HTTP whilst JSON RestAPI calls use HTTPS?

Thinking about HTTPS, it is a compute-intensive protocol and one should only use it where necessary. I'm working on a web application and I will be using Angular.js MVC on the client side, calling into WebAPI REST Api returning JSON.
When I think about it I do not need to encrypt the HTML, the client-side javascript or styles sheet etc. After initial handshake only the data calls to the REST Api need encrypting.
Do other people do this? Are there any pitfalls or caveats?
Here's a great Mozilla article detailing their restrictions and why they exist.
Their recommendation is to always stick strictly to either HTTP or HTTPS.
Also, I suspect that browsers and web servers will greatly minimize the impact of encrypting the data over ssl on subsequent calls. I suspect if you profile it you'll find the impact minimal/non-measurable.

What's the best practice for developing AJAX apps locally and deploying them on the fly?

I'm new to AJAX development. Due to same-origin policy, the most inconvenient thing for me so far is to modify the host information string (such as absolute URLs) in JavaScript files every time whenever I try to deploy the local files to the remote. I thought about writing a shell script for doing this but it seems awkward and not flexible. What's the best practice for doing this?
EDIT:
What if I wanna debug the remote AJAX app instead?
Add Access-Control-Allow-Origin: * header to your response. It's depends on what backend or server side you are using. There are some reference:
HTTP Access Control
Enable CORS in Apache
Website about "enable cross-origin resource sharing"

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.

BackBone.js CORS Connection

I have tried a lot to connect to some other domain using backbone.js.
But couldn't be able to perform.
I tried to override sync method, even tried ajax call in backbone.js, tried java script also. but couldn't succeed.
I don't know how to proceed further. any help will be appreciable..
Seems like CORS problem, you could not sove this with client side only.
To test API CORS support you can use test CORS
So you can solve this by:
Implement CORS support on API server side.
Proxy requests from your app server side to API.
Use another techies to cross-origin policy like(JSONP, etc..)

Could client side javascript act as a web spider?

Could ajax be used on the client side javascript to function as an in-the-background web spider? You'll have to excuse the vagueness of this post because I really have no idea where to begin technically in terms of the code and there is nothing online about a program like this.
You can use a cors proxy type script in order to do these Ajax requests client side via javascript. Look on Github for 'cors proxy', and set that up in your Node.js environment, then pass all of your ajax calls client side through this proxy.
Yes its possible but with some restrictions, meant only to be done from a specially-configured browser, not for arbitrary users to just run:
For chrome, open it using the command-line parameter --disable-web-security.
now you can do cross domain and such.
I assume you just want it for using yourself as a server and not on a public web page.
You cannot make ajax requests to different hosts, so no.

Categories