2013-04-15 5 views
2

Я использую Request Bin для публикации некоторых данных. В моем контроллере у меня есть следующий код:

$http.post('http://requestb.in/redacted', fooBar). 
    success(function(data) { 
     $scope.fooBarPostedSuccess = true; 
    }). 
    error(function(err) { 
     console.log("Error while posting to Request Bin"); 
     console.log("Error Info : " + err); 
    }); 

Это активируется с помощью кнопки на пользовательском интерфейсе. Теперь, когда это сработал, данные не отвечал на запрос Bin, и я получаю эту ошибку:

XMLHttpRequest cannot load http://requestb.in/redacted. 
Origin http://localhost:3000 is not allowed by Access-Control-Allow-Origin. 

Как размещать данные запрашивать бен через AngularJS контроллер? Кроме того, что означает вышеупомянутая ошибка?

EDIT: Я хочу добавить здесь, что я использую Node.js с AngularJS. Возможно, это что-то связано с Нодом?

ответ

3

Ах да ... вы имеете дело с проблемами междоменного скриптинга. Это не проблема AngularJS, а ограничение безопасности браузера и ОЧЕНЬ общая точка трения.

Вы не можете отправить POST/PUT/DELETE в другой домен (отличный от того, на котором размещен хостинг - localhost в вашем случае), не выполняя совместное использование ресурсов Cross-Origin (CORS). Вы ограничены GET для междоменного HTTP-запроса.

У вас есть два варианта:

  1. Смотрите, если ваш API поддерживает любые возможности кросс-доменов. Это может быть через CORS или это может быть через перегруженный GET API или JSONP.

  2. Прокси-запросы через ваш сервер. Поскольку вы используете Node.js, проксирование REST через ваш сервер чрезвычайно просто ... вам просто нужно настроить обработчик маршрута (например,/api/redacted) на вашем сервере Node.js, а затем сделать новый запрос на ваш фактический API-сервер с чем-то вроде Restler (пакет NPM) и вернуть результат обратно вашему клиенту.

Надеюсь, это поможет!

EDIT:

Ваш API поддерживает JSONP (Your API Docs). Вы можете использовать функцию JSONP от Angular для доступа к возможностям JSONP вашего API. (Angular.js JSONP docs).

Поскольку вы хотите иметь возможность ПОСТЫВАТЬ услугу, вам нужно будет использовать второй подход.

+0

К сожалению, ни один из них не работал - как я понимаю, jsonp [не может использоваться для запросов POST] (http://stackoverflow.com/a/3860117/2104976). Последнее тоже не сработало - я думаю, что сделал это неправильно. Есть ли блог, который показывает, как делать запросы POST на внешние веб-сайты в узле, который вы рекомендуете? – callmekatootie

+0

Справа. Вы можете использовать POST только на другом сервере, используя CORS, если сервер разрешает это. JSONP на самом деле просто GET под капотом. Но если ваш API поддерживает его, тогда вам не нужно пытаться. Вы используете '$ http.jsonp'. –

+0

Проксирование через узел ... вот вопрос о нем: http://stackoverflow.com/questions/10166277/proxy-http-request-with-node –

1

CORS позволяет как GET и POST

http://en.wikipedia.org/wiki/Cross-origin_resource_sharing

http://www.w3.org/TR/cors/

https://developer.mozilla.org/en-US/docs/HTTP/Access_control_CORS

Теперь, что это из пути ... я тоже нашел, что угловой в $ HTTP вона 't позвольте мне POST перекрестный домен. Я был подозрительным в этом, хотя, потому что у меня есть jquery ajax вызывает в других проектах, которые могут размещать кросс-домен просто отлично. Итак, я поменял свой POST $ http на $ .ajax POST, и это сработало.

// $http({ 
// url: url, 
// method: "POST", 
// data: data 
// }) 
// .success(successCallback) 
// .error(errorCallback) 

// ole reliable 
$.ajax({ 
    type : "POST", 
    url : url, 
    data : data, 
    success : successCallback, 
    error : errorCallback, 
    cache : false, 
    dataType : 'json', 
}) 
+0

$ .ajax - это jQuery правильно? – callmekatootie

+0

@callmekatootie да –

0

Вы можете использовать PutsReq вместо RequestBin. PutsReq поддерживает CORS.

Смежные вопросы