https://i.stack.imgur.com/AlWYJ.png
I recently hosted my site on Shopify using HTTPS, and then I attempted to make a GET request via Angular to a site that uses HTTP.
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
It works perfectly fine on the local server.
https://i.stack.imgur.com/7HPfY.png
However, I encountered an issue where I kept getting:
Refused to connect to '******' because it violates the following Content Security Policy directive: "connect-src 'self' https://* wss://*".
https://i.stack.imgur.com/7HPfY.png
Converting my API site from HTTP to HTTPS seems costly. Is there any workaround for this issue?
Are there alternative solutions available?
Could using certain frameworks or APIs help avoid this error?