如何添加CORS配置的角度控制器？ [英] How to add CORS Configuration in Angular Controller?

问题描述

我有一个服务器，该服务器将从蒙戈获取数据，它将以JSON类型踢

CORS问题

  

server.js
  /

  /服务器端CORS code交锋
app.all（'*'，函数（REQ，资源，下一个）{
    res.header（访问控制允许原产地，*）;
    res.header（访问控制允许的方法，OPTIONS，GET，POST，PUT，DELETE'）;
    res.header（访问控制允许报头，内容类型，授权，X-要求，随着）;
    如果（选项== req.method）{
        返回res.send（200）;
    }
    下一个（）;
}）;PLZ家伙假设链接** ** BASEURL我的菜单API
 

VAR baseURL时=HTTP：//本地主机：8000 /菜单; （为了您的方便）

  ** ** baseURL时踢哪一个JSON
 

现在我的目标是通过角控制器请求它（$ HTTP）： -

 使用严格
    VAR应用= angular.module（'AngularApp'，[]）;
    ** ///一个Cors启用Cliet侧**
    的app.config（['$ httpProvider'，函数（$ httpProvider）{
            // ...
               $ httpProvider.defaults.useXDomain = TRUE;
        $ httpProvider.defaults.withCredentials = TRUE;
        删除$ httpProvider.defaults.headers.common [X-要求，以];
        $ httpProvider.defaults.headers.common [接受] =应用/ JSON;
        $ httpProvider.defaults.headers.common [的Content-Type] =应用/ JSON;
        }]）;** VAR baseURL时=HTTP：//本地主机：8000 /菜单**
    app.controller（MenuController功能（$范围，baseURL时，$ HTTP）{        $ scope.menu = [];        $ http.get（baseURL时）.success（功能（数据）{
            $ scope.menu =数据;
        }）;
    }）;
 

...当我在浏览器中测试

火狐返回CORS错误： -
跨域请求阻止：同源策略不允许读取远程资源在 baseURL时。这可以由资源移动到相同域或启用CORS固定。
铬筹措： -
XMLHtt prequest无法加载。无访问控制允许来源标头的请求的资源present。因此，原产地本地主机不允许访问。

解决方案

http://npmjs.com/package / CORS 获取CORS一个很大的包

I have a Server which will Fetch data from Mongo and it will kick in json type

CORS PROBLEM

server.js /

/ server Side CORS  Code aded
app.all('*', function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header('Access-Control-Allow-Methods', 'OPTIONS,GET,POST,PUT,DELETE');
    res.header("Access-Control-Allow-Headers", "Content-Type, Authorization, X-Requested-With");
    if ('OPTIONS' == req.method){
        return res.send(200);
    }
    next();
});

Guys Plz suppose the Link **Baseurl** as my menu API 

var baseurl="http://localhost:8000/menus";(for your Convenience)

   **baseurl**   which kicks a Json

Now my aim to request it by Angular controller($http):-

    'use strict'
    var app = angular.module('AngularApp', []);
    **/// Cors enabled Cliet side**
    app.config(['$httpProvider', function ($httpProvider) {
            // ...
               $httpProvider.defaults.useXDomain = true;
        $httpProvider.defaults.withCredentials = true;
        delete $httpProvider.defaults.headers.common["X-Requested-With"];
        $httpProvider.defaults.headers.common["Accept"] = "application/json";
        $httpProvider.defaults.headers.common["Content-Type"] = "application/json";
        }]);

**var baseurl="http://localhost:8000/menus";**
    app.controller("MenuController", function($scope, baseurl,$http) {

        $scope.menu= [];

        $http.get(baseurl).success(function(data) {


            $scope.menu=data;


        });
    });

... when i tested in Browsers

Firefox Returns CORS error:- Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at baseurl. This can be fixed by moving the resource to the same domain or enabling CORS. Chrome raising :- XMLHttpRequest cannot load . No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin localhost is therefore not allowed access.

解决方案

Refer http://npmjs.com/package/cors a great Package for CORS

这篇关于如何添加CORS配置的角度控制器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！