How can I deploy a js web application that uses an API.
I have hosted it on netlify but it doesn't fetch the data.
Everything works fine on localhost.
Link: hiuhu-theatre.netlify.app
In firefox you can see the request the function getMovies made was blocked, the console shows the reason, it links to this URL.
Basically you're trying to use http protocol for that request when you're over https in your website.
To fix that simply change your "http://www.omdbapi.com/” to start with "https://" instead.
Also, if you can, do not add API key to client side code, if you do so anyone can steal it and use it themselves (and that might make you pay more for the service or reach the limit you have really quick), instead do a request to your back-end server so it fetches the data while hiding the API key.
It works in local because you're using http in local aswell.
I've overrided the getMovies function in my browser to use https and it worked nicely
Related
As far as I can tell, the model for creating a Blazor client application is to have one project for the client and another for the server. The Microsoft template shows an async call to get data, but it's just a download of a static JSON file. Any real application would need to call an API.
So I have a separate API project for this. But that project has a different localhost endpoint for debugging, and this is causing a CORS nightmare for me. My call from client to server isn't really cross-site, except for this debugging problem, so I don't want to do a ton of work figuring out CORS.
How can I get the Blazor client and web api server to run off the same localhost (or alias) domain, so that the client can make same site requests?
Yes.
When you create a new Blazor Web Assembly app there is a tick box for hosting it in ASP.NET.
If you tick that checkbox then you'll get a server that both serves the client page (via _Host.cshtml) and also responds to web api calls.
I am using NGINX as my web server for html/js/css files and my web app UI. It is a single page app that uses AJAX requests to a back end JEtty server. Previously I deployed everything in Jetty and ajax calls worked fine. In separating the back end from the web UI tier, I am now trying to figure out how to configure NGINX to allow AJAX requests to pass through to Jetty. But, I ALSO want to prevent someone from watching network traffic and seeing the ajax calls my app makes, then scripting those themselves. To do this, I believe if I can configure nginx to ADD a custom header to the requests as they pass through (is this even possible?) I could then only accept requests with those headers at my Jetty API level.
If that is possible, is it the right way to handle this so that outsiders can't get in to my back end API? Is there a way they could figure out that my nginx server is adding a header short of breaking in to my server and figuring out the configuration?
If your application calls your api via Ajax on the client there's nothing you can do to stop someone from calling it directly (assuming they otherwise have access to the page). At the end of the day, an Ajax request is just a request made from the client in JS. Now, there are lots of stupid ways to make it more difficult, but, if anyone really wants to call your api directly, they can.
If you're just talking about only allowing access through nginx (or specifically your /api location block), just bind jetty to localhost only.
First I'm not in the web side of our world, so be nice with the backend guy.
A quick background : For a personal need I've developped a google chrome extension. They are basically a webpage loaded in a chrome windows and... yeah that's it. Everything is on the client side (scripts, styles, images, etc...) Only the data are coming from a server through ajax calls. A cron job call a php script every hours to generate two files. One, data.json contains the "latest" datas in a json format. Another one hash.json contain the hash of the data. The client chrome application use local storage. If the remote hash differ from the local one, he simply retrieve the data file from the remote server.
As I have a BizSpark account with Azure my first idea was : Azure Web Site with php for the script, a simple homepage and the generated file and the Azure Scheduler for the jobs.
I've developed everything locally and everything is running fine... but once on the azure plateform I get this error
XMLHttpRequest cannot load http://tso-mc-ws.azurewebsites.net/Core/hash.json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:23415' is therefore not allowed access.
But what I really can't understand is that I'm able (and you'll be too) to get the file with my browser... So I just don't get it... I've also tried based on some post I've found on SO and other site to manipulate the config, add extra headers, nothing seems to be working...
Any idea ?
But what I really can't understand is that I'm able (and you'll be
too) to get the file with my browser... So I just don't get it
So when you type in http://tso-mc-ws.azurewebsites.net/Core/hash.json in your browser's address bar, it is not a cross-domain request. However when you make an AJAX request from an application which is running in a different domain (http://localhost:23415 in your case), that's a cross-domain request and because CORS is not enabled on your website, you get the error.
As far as enabling CORS is concerned, please take a look at this thread: HTTP OPTIONS request on Azure Websites fails due to CORS. I've never worked with PHP/Azure Websites so I may be wrong with this link but hopefully it should point you in the right direction.
Ok, will perhap's be little troll answer but not my point (I'm .net consultant so... nothing against MS).
I pick a linux azure virtual machine, installed apache and php, configure apache, set some rights and define the header for the CROS and configure a cron in +/- 30minutes... As my goal is to get it running the problem is solved, it's running.
My application will be deployed on HTTPS (currently it is in development and running on HTTP).
Will deploying the web app on HTTPS automatically make my AJAX calls HTTPS as well? I am using relative URLs in the AJAX calls, so i am thinking that when the absolute URL is constructed, HTTPS will be appended automatically.
please let me know. thanks for your response
If you are using relative URLs, then yes.
However, it is really important to test this before running live, as certain browsers(at least IE6) will display a really alarming warning if you try to load resources like images using a non-https connection.
One of my colleagues is having a problem with an AJAX call to a .NET WebService. The call works under HTTP, but the same call is having a problem under HTTPS. The webservice is written in .NET 4.0 with C# on an IIS 7 server.
The secure website is at https://sql.data-rx.com/grouppharmdrugsearch/. There is an unsecured version at http://sql.data-rx.com/grouppharmdrugsearch/. There isn't any sensitive information on the page itself. It is embedded (I believe in a frame) on a client's website that does use HTTPS, and our page needs to be in HTTPS so browsers don't give a mixed secured/unsecured elements present message.
To test the problem on the site you first have to enter a zip code in the second textbox (I have been using 90210 for testing) and then you can enter the first few letters of a drug into the third textbox. After waiting a second or so for additional letters the page calls the webservice to populate a drop down list of possible drug choices beginning with the supplied letters. The secure webservice call is to https://sql.data-rx.com/grouppharmdrugsearch/Service/drugNameAutocomplete.svc/GetDrugList with POST data for 'prefixText' and 'count'. Under HTTP the service call succeeds and populates the drop down; under HTTPS the call gets a 404 error. The HTTPS web service is reachable if you point a browser to https://sql.data-rx.com/grouppharmdrugsearch/Service/drugNameAutocomplete.svc, but the method isn't recognized when it is appended to the service.
I have been using Firefox's Tamper Data addon to compare the service calls and they appear to be exactly the same, except one is to the HTTPS site and one is to the HTTP site, with the referrers changing appropriately. The HTTPS call receives the 404 error, while the HTTP call receives the JSON data.
I believe there may either be something missing from the webservice that would allow the call to function under HTTPS (though I can't think of anything that should matter in this case), or the HTTPS web site itself was misconfigured when it was setup. Any help would be appreciated.
We finally figured out the solution from this site. Basically the binding was only configured for HTTP, not HTTPS, and we need to create a custom binding to allow the webservice to function over HTTPS.