JavaScript can't access my query API - javascript

I built an app with Google App Engine that:
Queries a URL (e.g. http://myapp.appspot.com/query?name="SomeName"&start_date="2012-01-01")
Receives a JSON response. This JSON response contains data from my own datastore within the same domain.
Plots a chart using that response.
The app.yaml configuration has the following lines:
- url: /.*
script: main.py
Where in main.py, I assigned the URL query to be handled by the class QueryHandler.
All is well and good if I run the app online. However, I cannot receive a JSON response if I run the app using the offline development server.
When testing offline, I also duplicate my online datastore into the offline development server. I can confirm that it works well because I have other scripts that query into it and they work fine. The only problem is the JavaScript chart.
Attempted solutions
If I change the query URL to http://localhost:8080/query?name="SomeName"&start_date="2011-01-01", the chart renders fine.
If I insist on the querying the URL on the cloud http://myapp.appspot.com/query?name="SomeName"&start_date="2012-01-01", I cannot render the chart.
Objective
I'd like to be able to query the cloud URL at all times, without having to change the domain to localhost. This will be useful to me in the long run when I decide to open up a public API. Is there a way to do that? Or is this just a limitation on the development server?

Your javascript should always query back to the server from where it was loaded.
Use window.location.hostname and window.location.port to get the host & port of origin server.

As you are apparently in control of the server who generates the JSON, you might workaround SOP by serving JSONP which is not much additional work.
Just check for a callback parameter and wrap your output within the fucntionname passed as callback. See JSONP.

Related

API request to a local client page

Could you please advise on the following?
Let's assume I have a local html page stored on my local drive "c:\test.html".
If I open it in a browser, it's treated as a GET request to this page, right?
Is it possible to send, for example, POST request to the same local page, with "fetch"?
And inside "c:\test.html" to check if it was requested with POST method, return something?
It would be something like a local-PC API.
Static HTML pages do not have any request capabilities. What's actually happening here is that there is some sort of server that takes your request and responds with the HTML document. You would need to host your own server of some sort that could take and respond to requests. For this, libraries like express.js work well.
Edit: If you are accessing it through a file:// url, your browser is just reading the file off your drive directly, so you would need some sort of localhosted server.
This is not how it works. When you open a file with your browser, it uses a file protocol, not a HTTP protocol. Look at the URL. You'll see what kind of protocol was used to retrieve the resource.
So no, you cannot sent a fetch request to a local file. You have to establish a proper sever in your localhost and let it handle requests. Local files do NOT handle requests. Servers do.

Is it possible to have dynamic authorized redirect URI for Google cloud's OAuth 2.0?

Please help me rephrase the question if it doesn't fully reflect what I want.
I have an app that consists of:
1)Go server API
2)Go server Frontend that utilizes API's endpoints
3)Docker container that runs both servers
During development I had localhost set statically in multiple places, such as:
1)In the API server for enabling CORS in order for Frontend to be able to communicate with the API
Example:
func enableCors(w *http.ResponseWriter) {
(*w).Header().Set("Access-Control-Allow-Origin", "http://localhost:8080")
(*w).Header().Set("Access-Control-Allow-Credentials", "true")
}
2)In the API server for redirecting to and from the API in order to authenticate the user
3)In the Frontend server JavaScript part to access the API
4)In Google API Authorized redirect URIs as:
http://localhost:8001/oauth/authenticate?method=google
For the first time I want to make my application operate in a more production like way.
If every time someones downloads my application and builds a docker image from it the resulting container would have a different external IP address how should I set up my code structure to look like in order to account for this dynamic IP?(Especially with Google cloud APIs redirect for OAUTH)? Or am I fundamentally wrong and this is not possible/not wanted behavior in the first place as there usually is one server on which X application is hosted and its IP is always known and static in the real world?
The only thing I came up with if after all it is something achievable is to somehow get container IP inside the Dockerfile and then set it to an Environment variable that would then be used by both servers but that still doesn't solve the Google API OAUTH static allowed redirect URI problem. Hopefully, I was able to convey what the problem is because I have had trouble phrasing it.
Progress:
So far I have managed to set environment variable through a shell script during docker build like so:
export SERVER_IP=$(hostname -I | xargs)
and for the JavaScript I used webpack plugin Dotenv with systemvars parameter set to true to capture system env and incorporate it into JS.
It is enough to ask users of your app to complete config file. They must write their own APIKey at least, and I think they will configure their Google API and can easily get their IP(or just writes their static domain name). You must only inform users in README.

Fetching the address of web server dynamically using JS

I have an Angular JS app, wherein the back end is built in .NET. To fetch the data I call the exposed API controller methods from .NET project.
While calling the controller methods, I need to add "http://localhost:port" at the starting of controller method path. So my complete URL is something like:
http://localhost:port/api/controller/method
This seems obvious to me. However, while migrating this app to higher environments, I manually need to replace this string with the IPs of environment server. SO that same URL on PROD becomes:
http://PROD-IP:port/api/controller/method
Although this too makes sense, my queries are as below:
Should not localhost point to the server automatically. I mean if I deploy my app on 127.0.0.1 on every environment, then localhost:port should work fine in each case, and I need not to replace the IP for each environment. (This is my opinion and this approach is not currently working)
Is there a way in JS to fetch the IP address from the current URL. So that, a user enters the app URL at beginning and later for all back end call, I get the server URL. I tried document.location but it didn't work as expected.
I tried looking for solutions on various blog, but probably I couldn't frame correct words and didn't get any relevant solution.
JavaScript doesn't have any concept of hostnames or IP addresses. You would have to use an external service to resolve an IP address from a hostname.
You can get the domainname using location.hostname and then use some external webservices to lookup its IP

Connecting to an external API with Angular

I'm trying to connect to the Expedia Api. With this they have an api key and id.
I was using jsonp with this but there is a bug in there causing problems. The other thing is my api key is exposed in the javascript.
So now I have to find another way. I am now requesting json but of course I can't get cross domain with it so I have found a php proxy. My app is now reliant on php (this is ok though). When I access the php proxy I now get authentication errors. I have tried a different endpoint on a different site and the script works.
So therefore I cannot access this API.
There seems to be very little information, tutorials and scripts out there on how to make an api cross site, php proxies or authentication. I thought with the amount of sites now reliant on this type of technology there might be something.
How can I make a php proxy and return this data back to angular?
How can I safely hide my api key?
Have all of your API keys etc in a PHP file on your server. In that PHP file you need to curl to the API. Then have your PHP script return a json_encode() of whatever their API returns. That way no one sees your API deets.

Send analytic data to different domain without response

Precondition
I own mysite.com
I do not own othersite.com, but I can embed javascript code there
Question
How to send analytic data from othersite.com to mysite.com ?
Expected : othersite.com client -> mysite.com server
Not expected : othersite.com client -> othersite.com server -> mysite.com server
Its principle seems like to be similar with Google Analytics, but I don't know the exact principle
I know that it couldn't be done by ajax due to cross-domain problem
How does it change if I own othersite.com ?
How to send analytic data without response ?
For example, Heap Analytics send analytic data without response
The default scenarion with Google Analytics (and all other Web Analytics Tools I know) is to transfer data across domains by dynamically creating an image with a source that points to the tracking server and appending user data (like unique id per user) as url parameters to the image source.
Apart from everything you send via the image source you will also get the data from the http request (ip adress, user agent etc).
For a simple system you could create a script that stores the url and http data directly to a database before it returns a (1 pixel transparent) image. If you want something scalable you would probably write the data to a log file and use some currently hyped big data technology (hadoop, hive etc) for processing.
Decoupling data collection and processing is a good idea in any case, in that allows you to more easily switch components of your tracking application for improved versions without affecting the other parts of the system.
Sending an image is reliable inasfar as it works for any browser without enabling any special configurations (cors etc). It is however rather easily blocked (users just have to block pixel images or redirect calls to your server via their host file).
If the other domain was yours you could
track via ajax
read the server logs directly or pipe them to a dashboard of your choice
If you do not have access physically to the server but the owners let you configure their name servers you could run all incoming http requests through your tracking script before redirecting them to the requested page.
I took a look at Heap Analytics. They send an image request just like the other tools:
https://heapanalytics.com/h?a=236035469&u=4184751431615606&v=2274541888&s=3701858993&b=web&z=2&h=%2F&d=heapanalytics.com&t=Heap%20%7C%20Mobile%20and%20Web%20Analytics&r=https%3A%2F%2Fwww.google.de%2F&k=Screen%20Dimensions&k=1050%20x%201680&k=Window%20Width&k=1973&k=Window%20Height&k=1039&tm=1432884624859
which returns http 200 response code and an 1 pixel transparent image, so it does not look like they "track without response" after all.

Categories

Resources