xdomain implementation for angular project - javascript

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.

Related

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 ?

Errors with OpenWeather API

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.

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.

It's possible make a cross domain request from backbone js?

I have a backbone-js app, and i need make requests to the backend api but it's a different app which serves the backbone app.
In other words, i have a classic mvc app (app #1) that have all the backbone js files.
The backbone app (app #2) needs to make fetch (requests) to the backend api (app #3).
But i'm having an error like this in the bacbone app:
XMLHttpRequest cannot load http://foo ... No 'Access-Control-Allow-Origin' header is present on the requested resource.
I tried to add that header to the response but still not working.
Is there a way to allow the cross domain request or i'll have to make the requests from backbone to app #1 and then the app #1 make the same request to the backend (app #3)?

Categories

Resources