首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何在AngularJs中启用CORS

如何在AngularJs中启用CORS
EN

Stack Overflow用户
提问于 2014-05-23 15:05:39
回答 7查看 417K关注 0票数 152

我已经使用JavaScript为Flickr照片搜索API创建了一个演示。现在我正在将它转换为AngularJs。我已经在网上搜索过了,找到了下面的配置。

配置:

myApp.config(function($httpProvider) {
  $httpProvider.defaults.useXDomain = true;
  delete $httpProvider.defaults.headers.common['X-Requested-With'];
});

服务:

myApp.service('dataService', function($http) {
    delete $http.defaults.headers.common['X-Requested-With'];
    this.flickrPhotoSearch = function() {
        return $http({
            method: 'GET',
            url: 'http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=3f807259749363aaa29c76012fa93945&tags=india&format=json&callback=?',
            dataType: 'jsonp',
            headers: {'Authorization': 'Token token=xxxxYYYYZzzz'}
         });
     }
});

控制器:

myApp.controller('flickrController', function($scope, dataService) {
        $scope.data = null;
        dataService.flickrPhotoSearch().then(function(dataResponse) {
            $scope.data = dataResponse;
            console.log($scope.data);
        });
    });

但是我还是得到了同样的错误。以下是我尝试过的一些链接:

XMLHttpRequest cannot load URL. Origin not allowed by Access-Control-Allow-Origin

http://goo.gl/JuS5B1

EN

回答 7

Stack Overflow用户

回答已采纳

发布于 2014-05-23 16:10:56

您不需要。您向其发出请求的服务器必须实现CORS,以便从您的网站访问JavaScript。您的JavaScript无法授予自己访问其他网站的权限。

票数 201
EN

Stack Overflow用户

发布于 2014-05-23 16:43:51

尝试使用资源服务来使用flickr jsonp:

var MyApp = angular.module('MyApp', ['ng', 'ngResource']);

MyApp.factory('flickrPhotos', function ($resource) {
    return $resource('http://api.flickr.com/services/feeds/photos_public.gne', { format: 'json', jsoncallback: 'JSON_CALLBACK' }, { 'load': { 'method': 'JSONP' } });
});

MyApp.directive('masonry', function ($parse) {
    return {
        restrict: 'AC',
        link: function (scope, elem, attrs) {
            elem.masonry({ itemSelector: '.masonry-item', columnWidth: $parse(attrs.masonry)(scope) });
        }
    };        
});

MyApp.directive('masonryItem', function () {
    return {
        restrict: 'AC',
        link: function (scope, elem, attrs) {
            elem.imagesLoaded(function () {
               elem.parents('.masonry').masonry('reload');
            });
        }
    };        
});

MyApp.controller('MasonryCtrl', function ($scope, flickrPhotos) {
    $scope.photos = flickrPhotos.load({ tags: 'dogs' });
});

模板:

<div class="masonry: 240;" ng-controller="MasonryCtrl">
    <div class="masonry-item" ng-repeat="item in photos.items">
        <img ng-src="{{ item.media.m }}" />
    </div>
</div>
票数 9
EN

Stack Overflow用户

发布于 2019-07-02 19:39:42

我遇到了类似的问题,问题出在后端。我使用的是节点服务器(Express)。我收到了来自前端(Angular)的get请求,如下所示

   onGetUser(){
        return this.http.get("http://localhost:3000/user").pipe(map(
            (response:Response)=>{
                const user =response.json();
                return user;
            }
        )) 
    }

但它给出了以下错误

这是使用不带头部的express编写的后端代码

app.get('/user',async(req,res)=>{
     const user=await getuser();
     res.send(user);
 })

在向方法添加了一个头之后,问题就解决了

app.get('/user',async(req,res)=>{
    res.header("Access-Control-Allow-Origin", "*");
    const user=await getuser();
    res.send(user);
})

您可以获得有关Enabling CORS on Node JS的更多详细信息

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/23823010

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档