加载失败-跨源请求为-Angular.js 1.x-ngRoute [英] Faild to load - Cross origin requests are- Angular.js 1.x - ngRoute
问题描述
我知道这已经是SO中的问题了.但是我的疑问是，当我尝试从外部服务器获取数据时，我可以毫无问题地获取数据，并且可以使用ng-repeat填充表中的数据.但再次执行相同的操作以获取具有不同URL的其他数据(音频-.ogg)，它显示仅协议方案支持跨源请求:http，data，chrome，chrome-
使用低于$ http的ngRoute可以获取数据.
app.controller('HomeController', function($scope) {
$scope.message = 'Hello from HomeController';
$http.get("https://some-example-url.com/posts")
.then(function(response) {
$scope.externalAPIData = response.data;
$scope.sortByTitle = 'title';
$scope.searchByUserName = '';
$scope.sortReverse = false;
console.log("response", response.data)
});
});
以下方法不适用
app.controller('BlogController', function($scope,$http) {
$scope.message = 'Hello from BlogController';
$http.get('https://example-url.com/previews/volume1.ogg' ).success(function (data){
$scope.medianew = data.media.map(function (m) {
m.url = $sce.trustAsResourceUrl(m.url);
return m;
});
});
});
为此，我尝试从给定的URL访问数据，我只是将其更改为从本地json进行调用，如下所示:
[{
"audioSourceName": "sample 1",
"audioSource":"https://example-url.com/previews/volume1.ogg"
}, {
"audioSourceName": "sample 2",
"audioSource":"https://example-url.com/previews/volume3.ogg"
} ]
要实现以上目标，我知道我必须做一些服务器工作(node.js)，但对此一无所知. 这是我指的是在本地实现的 我不知道为什么相同的方法会针对不同的网址抛出CROS错误.
请不要对此投反对票.
小提琴或小矮人的例子将有助于理解.
谢谢
您无法使用$ http获得视频资源. 在$ http中，而不是使用" https://example-url.com/previews/volume1.ogg "作为网址，请使用" https://example-url.com/json-data"，然后更改元素的网址.
$http.get(<url-to-load-json-from>).success(function (data){
$scope.medianew = data.media.map(function (m) {
m.url = $sce.trustAsResourceUrl(m.url); // m.url is the url of the video
return m;
});
});
当您从$ http.get获取媒体文件而不是json时，CORS异常到来.
https://plnkr.co/edit/oXF1oOuNeMvTQPNntP6J?p=preview
i know this is already asked question in SO. but my doubt is, when i try i to fetch data from external server i can get it without any problem and i can able to populate the data in table with ng-repeat. but once again am doing the same to get some other data(audio - .ogg) with different url it showing Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-
am using ngRoute for below $http i can get data.
app.controller('HomeController', function($scope) {
$scope.message = 'Hello from HomeController';
$http.get("https://some-example-url.com/posts")
.then(function(response) {
$scope.externalAPIData = response.data;
$scope.sortByTitle = 'title';
$scope.searchByUserName = '';
$scope.sortReverse = false;
console.log("response", response.data)
});
});
same approach is not working for below
app.controller('BlogController', function($scope,$http) {
$scope.message = 'Hello from BlogController';
$http.get('https://example-url.com/previews/volume1.ogg' ).success(function (data){
$scope.medianew = data.media.map(function (m) {
m.url = $sce.trustAsResourceUrl(m.url);
return m;
});
});
});
for that i try to access the data from given url, i just change it to call from my local json as below
[{
"audioSourceName": "sample 1",
"audioSource":"https://example-url.com/previews/volume1.ogg"
}, {
"audioSourceName": "sample 2",
"audioSource":"https://example-url.com/previews/volume3.ogg"
} ]
to achieve above, i know I've to do some server works(node.js) but no idea about that. this is what i referred to achieve locally i don't know why the same approach has throwing CROS error for different url.
pls don't down vote it.
fiddle or plunker example would helpful to understand.
Thanks all
You cannot get the video resource with $http. In $http instead of using "https://example-url.com/previews/volume1.ogg" as url use "https://example-url.com/json-data" and then change the url of the element.
$http.get(<url-to-load-json-from>).success(function (data){
$scope.medianew = data.media.map(function (m) {
m.url = $sce.trustAsResourceUrl(m.url); // m.url is the url of the video
return m;
});
});
CORS exception was coming as you were fetching media file not json from $http.get.
https://plnkr.co/edit/oXF1oOuNeMvTQPNntP6J?p=preview
这篇关于加载失败-跨源请求为-Angular.js 1.x-ngRoute的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
