Can we make a GET between HTTPS and HTTP site?

Question

I have a site that I hosted in Shopify in HTTPS, then I made a GET via Angular to a HTTP site.

---

Angular

<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,900" rel="stylesheet">

<style type="text/css">
    div {
        font-family: 'Roboto', sans-serif;
    }

    p, a {
        font-size: 12px;
        font-family: 'Roboto', sans-serif;
    }

    .body-text-header-large {
        font-size: 1.5em;
        font-weight: 300;
        line-height: 2em;
        color: #42baf1;
        font-family: 'Roboto', sans-serif;
    }

    .company-name {
        font-weight: 900;
        font-family: 'Roboto', sans-serif;
    }

</style>


<div ng-app="myApp" ng-controller="myCtrl">
    <div class="container">


        <span class="body-text-header-large">DISTRIBUTORS</span>
        <p class="silver">Bioss Antibodies are sold worldwide. Find a distributor near you to order in your area!</p>



        <div ng-repeat="obj in data" >

            <div class="row">

                <!-- Country -->
                <div class="col-xs-4 text-center" >
                <p>{{obj.country}}</p>
                    <img src="data:image/png;base64,{{obj.flag}}" alt="" width="30px">
                </div>

                <!-- Main Info -->
                <div class="col-xs-4" >
                    <p class="company-name">{{obj.user.username}}</p>
                    <p>{{obj.distributor.phone_public}}</p>
                    <p>{{obj.user.email}}</p>
                    <a href="{{obj.distributor.url}}">{{obj.distributor.url}}</a></span> <span class="col span_2_of_6">
                </div>

                <!-- Logo -->
                <div class="col-xs-4 pull-right" >
                    <img src="data:image/png;base64,{{obj.logo}}" alt="" width="100px">
                </div>

            </div>

            <br><hr>


        </div>

    </div>
</div>

<script>

    "use strict";
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope, $http) {
        $http.get("http://d.biossusa.com/api/distributor?key=*******")
        .then(function(response) {
            var data = response.data;

            var array = $.map(data, function(value) {
                return [value];
            });

            console.log(typeof(array));
            console.log(array.length);
            console.log(array);

            try {
              $scope.data = array;
          } catch (error) {
              console.log('its not json');
          }
      });
    });

</script>

---

Result locally

work perfectly fine

---

I kept getting

Refused to connect to 'http://d.biossusa.com/api/distributor?key=******' because it violates the following Content Security Policy directive: "connect-src 'self' https://* wss://*".

Turning my API site from HTTP into HTTPS might be a bit expensive. What is the work around for this ?

Is there another way ?

Is there any frameworks or API that help avoid this error ?

Answer 1

While calling a URL on from HTTP to HTTPS the same origin policy will block your request. The browser protocol is handled as a different origin.

For example you can use CORS to enable cross-origin HTTP-Requests. Using CORLS will allow you to send requests from HTTP to HTTPS. This is a good guide which lay down the basics on using CORS and what it is.

Mostly you need to allow the cross-domain request by adding Access-Control-Allow-Origin: * to your response header. This configuration will be made in your backend application (serverside). But this will not help you at this time:

Note that CORS/AJAX requests will not work if you call a URL from HTTPS to HTTP due to the security features of browsers. Take a look at the w3c access control security which says:

As indicated as the first step of the cross-origin request algorithm and in the redirect steps algorithm user agents are allowed to terminate the algorithm and not make a request. This could be done because e.g.:

• The origin of the resource blacklisted.

• The origin of the resource is known to be part of an intranet.

• The URL is not supported. -https to http is not allowed.

• https is not allowed because of certificate errors

Answer 2

Because of CORS policy, it's not possible to call from HTTP URL to HTTPS, I was facing the same problem. So, I have changed my website from HTTP to HTTPS, Use [https://www.cloudflare.com/][1]

To convert your HTTP website to HTTPS.