我在HTTPS
的Shopify中托管了一个网站,然后我通过Angular将 GET 发送到HTTP
网站。
角
<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>
本地结果
工作得很好
我一直在
拒绝连接到“http://d.biossusa.com/api/distributor?key= ******”,因为它违反了以下内容安全策略指令:“connect-src'self'https:// * wss:// *”。< / p>
将我的API站点从HTTP转换为HTTPS可能有点贵。为此做了什么工作?
还有其他办法吗?
是否有任何框架或API有助于避免此错误?
答案 0 :(得分:3)
从 HTTP到HTTPS 调用网址时,same origin policy会阻止您的请求。浏览器协议作为不同的来源处理。
例如,您可以使用CORS启用跨源HTTP请求。使用CORLS 将允许您将请求从HTTP发送到HTTPS 。这是一个good guide,它阐述了使用CORS及其原理的基础知识。
大多数情况下,您需要通过在响应标头中添加Access-Control-Allow-Origin: *
来允许跨域请求。此配置将在您的后端应用程序(服务器端)中进行。但是这个时候这对你没有帮助:
注意由于浏览器的安全功能,如果您将网址从HTTPS调用到HTTP ,则CORS / AJAX请求将无法正常工作。看看w3c access control security说:
如跨源请求算法的第一步所示,并且在重定向步骤算法中,允许用户代理终止算法而不发出请求。这可以做到,因为例如:
资源的来源被列入黑名单。
已知资源的来源是内联网的一部分。
- 不支持该网址。 -https到http是不允许的。
由于证书错误,- 不允许使用https
答案 1 :(得分:0)
由于CORS策略,无法从HTTP URL调用HTTPS,我遇到了同样的问题。 所以,我已经将我的网站从HTTP更改为HTTPS,使用[https://www.cloudflare.com/][1]
将您的HTTP网站转换为HTTPS。