Errors with OpenWeather API - javascript

I made a weather forecast web app which uses p5.js. It runs perfectly on my localhost. Why does this keep popping up on github page:
Mixed Content: The page at '' was loaded over HTTPS, but
requested an insecure XMLHttpRequest endpoint ''. This request
has been blocked; the content must be served over HTTPS.
github: https://github.com/VlatkoStojkoski/OpenWeather-API
github page: https://vlatkostojkoski.github.io/OpenWeather-API/

The problem is that the GitHub page is loading the API request that uses a http connection instead of the required https. Try accessing the API server on a secure connection and it should work.

Related

In Javascript/Typescript, how to check a http web site is accessible from https web site?

Here's what I'm trying to do.
I have a web site hosted on https.
This web site shows a link to another http web site "only" if this http web site can be reached. Based on where my web site is hosted, it may or may not have the access to this http web site - that's why I need to check whether it's reachable or not first.
If this link is visible, user can click this link and it will open up the http web site in a new tab using window.open("http://xxx").
In doing #2 using fetch API with HEAD method, I get the following error
Mixed Content: The page at 'https://xxx' was loaded over HTTPS, but requested an insecure resource 'http://yyy'. This request has been blocked; the content must be served over HTTPS. Is there any other way to implement #2 without causing this error?

Why Am I getting javascript error : "This request has been blocked; the content must be served over HTTPS."?

I've a web site where i'm hosting a mysql database, a website and a webapi app (say: https://my-website.com/webapi).
Then I've a WebGl app hosted on a CDN (says: https://www.mycdn.com/myapp)
After WebGl app is downloaded into user browser, user must login or register. Login check is made from webgl app to https://my-website.com/webapi .
I'm getting this error:
The page at .. page name ... was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint http://my-website.com/webapi. This request has been blocked; the content must be served over HTTPS.
I can assure that in my C# Unity code i'm calling my web api via https.
What can be the error ?

Progressive Web App HTTPS to HTTP Requests

I'm creating a Progressive web app and need to make requests to an API which is HTTP and doesn't have HTTPS. Can't change the app to HTTP as PWA's require HTTPS, can't change request link to https.
Getting this error:
Mixed Content: The page at 'https://current-site.herokuapp.com/' was
loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint
'http://the-api.com/api/customer?$filter=contains(CustomerName,%20%27test%27)&$select=CustomerName,CustomerId&$top=10'.
This request has been blocked; the content must be served over HTTPS.
Hoping there's a way around this. Currently using nodejs and express to serve. Requests are being made from frontend vuejs with axios.
Thanks for helping.
Shy of using an insecure or old browser, or telling your users to use some command line flags before surfing the web, there is not a direct method for this. This is by design and would be a major security flaw if apps could do this directly.
However, if you're determined to use the insecure API, you can write an HTTPS proxy API on your server, that turns around and does the request to the real API over HTTP.

VueJS Requested an insecure XMLHttpRequest endpoint

I have a VueJs app with a Laravel backend as the API.
When running locally the app works as expected with https, however when on the production server I get the Requested an insecure XMLHttpRequest endpoint message.
My server is on Digital Ocean, has been setup with RunCloud and has SSL enabled through LetsEncrypt.
The application can be viewed here: https://vehicletrader.sweney.co/#/
Please note at this stage theres is no authorization surrounding the API.
Any advice would help.
A slash / at the end of the request URL was the cause of this for me.
My axios call was a simple axios.post('https://getShafiq.com/hello/').
Locally, it was working.
But on prod server behind CloudFlare, it would return insecure XMLHttpRequest.
What I noticed in the 'Network' tab of my browser's dev tools is that the URL is returning a 301 - Moved Permanently and right after it, the error about the insecure endpoint.
I removed the / after /hello and boof, it works.

xdomain implementation for angular project

I'm developing an angular application that executes ajax calls to web services to get/post data. The issue is that my app runs under a secure protocol (https), but the services are exposed using a non secure protocol (http) so everytime it tries to get/post data Ithe console shows this message: "Mixed content: the page https://myappdev.abcdomain.com/app/index.html was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://myservice-a-bus.abcdomain.com/moduleUserApp/verifyUser'. This request has been blocked; the content must be served over HTTPS." I found this is related to Cross-Domain Resources and that the xdomain patch would fix it. So I tried implementing it but I can't figure out where to add the proxy.html file. Below is where my app is and some of the services I call:
Angular app is
https://myappdev.abcdomain.com/app/index.html
The services I call are (get/post):
http://myservice-a-bus.abcdomain.com/moduleUserApp/verifyUser
http://myservice-b-bus.abcdomain.com/moduleFriendList/get/{"friendList": "ListA"}
http://myservice-c-bus.abcdomain.com/moduleCountryList/get/{"countryList": "Canada"}
Hope anyone can help with this issue.

Categories

Resources