angularjs - origin - angular4 httpclient cors



angular.js-resource로 cors 요청을 사용하는 방법 (1)

angular.js 응용 프로그램이 있고 CORS 요청을 수행해야합니다.

여기에 설명 된 각도 리소스를 사용하여 "나머지"서비스를 정의하고 싶습니다. http://docs.angularjs.org/tutorial/step_11 .

그러나 나는이 일을하는 방법을 찾지 못했습니다. Google에서 다음 샘플 코드를 발견 : http://jsfiddle.net/ricardohbin/E3YEt/ ,하지만 이것은 각도 리소스와 함께 작동하지 않는 것 같습니다.

내 app.js입니다.

'use strict';

angular.module('corsClientAngularApp', ['helloServices'])
  .config(function ($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl'
      })
      .otherwise({
        redirectTo: '/'
      });
  });

이것은 내 services.js 나머지 서비스와 함께

angular.module('helloServices', ['ngResource']).
    factory('Hello', function($resource){
  return $resource('http://localhost:8080/cors-server/hello/:name', {}, {
    query: {method:'GET', params:{name:'name'}, isArray:false}
  });
});

이것은 $ http를 사용하는 컨트롤러가있는 main.js입니다.이게 작동합니다! :

'use strict';

angular.module('corsClientAngularApp')
  .controller('MainCtrl', function ($scope, $http, Hello) {
    $http.defaults.useXDomain = true;


    $http.get('http://localhost:8080/cors-server/hello/stijn')
        .success(function(data) {
            $scope.hello = data;
        });
  });

이것은 각 리소스를 사용하는 내 main.js의 또 다른 버전입니다. 이것은 작동하지 않습니다.

'use strict';

angular.module('corsClientAngularApp')
  .controller('MainCtrl', function ($scope, $http, Hello) {
    $http.defaults.useXDomain = true;
    $scope.hello = Hello.query({name:'stijn'});
  });

이것은 (chrome devtools의) 작업 요청의 헤더입니다.

Request URL:http://localhost:8080/cors-server/hello/stijn
Request Method:OPTIONS
Status Code:200 OK

Request Headers
Accept:*/*
Accept-Charset:ISO-8859-1,utf-8;q=0.7,*;q=0.3
Accept-Encoding:gzip,deflate,sdch
Accept-Language:nl-NL,nl;q=0.8,en-US;q=0.6,en;q=0.4
Access-Control-Request-Headers:accept, origin, x-requested-with
Access-Control-Request-Method:GET
Cache-Control:max-age=0
Connection:keep-alive
Host:localhost:8080
Origin:http://localhost:9000
Referer:http://localhost:9000/
User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.31 (KHTML, like Gecko) Chrome/26.0.1410.64 Safari/537.31

Response Headers
Access-Control-Allow-Headers:accept, origin, x-requested-with
Access-Control-Allow-Methods:GET
Access-Control-Allow-Origin:*
Content-Length:0
Date:Thu, 25 Apr 2013 10:42:34 GMT
Server:Apache-Coyote/1.1

그리고 이들은 NOt 작업 요청의 헤더입니다.

Request URL:http://localhost/cors-server/hello/stijn
Request Method:OPTIONS
Status Code:200 OK

Request Headers
Accept:*/*
Accept-Charset:ISO-8859-1,utf-8;q=0.7,*;q=0.3
Accept-Encoding:gzip,deflate,sdch
Accept-Language:nl-NL,nl;q=0.8,en-US;q=0.6,en;q=0.4
Access-Control-Request-Headers:accept, origin, x-requested-with
Access-Control-Request-Method:GET
Cache-Control:max-age=0
Connection:keep-alive
Host:localhost
Origin:http://localhost:9000
Referer:http://localhost:9000/
User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.31 (KHTML, like Gecko) Chrome/26.0.1410.64 Safari/537.31


Response Headers
Allow:GET,HEAD,POST,OPTIONS,TRACE
Connection:Keep-Alive
Content-Length:0
Content-Type:text/plain
Date:Thu, 25 Apr 2013 10:41:12 GMT
Keep-Alive:timeout=5, max=100
Server:Apache/2.2.22 (Win32)

각도 리소스를 사용할 때 요청 URL이 잘못된 것 같습니다. 그런데 왜?

감사!


$resource URL은 매개 변수에 콜론을 사용할 수 있습니다. 따라서 url에서 port를 사용할 때 포트에 대해 콜론을 이스케이프해야합니다. 이것은 $ resource docs에 설명되어 있습니다.





angularjs-service