Проблема CORS на localhost при вызове службы REST из angularjs
Я изучаю angularJS и пытаюсь реализовать его в своем приложении.
У меня есть RESTful служба WCF, размещенная на localhost IIS. Он имеет метод GET, определенный для получения списка документов:http://localhost:70/DocumentRESTService.svc/GetDocuments/
теперь я пытаюсь использовать эту услугу в своем угловом приложении и отображать данные . Следующий код : HTML-код :
<html>
<script src="../../dist/js/angular/angular.min.js"></script>
<script src="../../assets/js/one.js"></script>
<body ng-app="myoneapp" ng-controller="oneAppCtrl">
{{"Hello" + "AngularJS"}}
<hr>
<h1> Response from my REST Service </h1>
{{hashValue}}
<hr>
<h1> Response from w3school REST Service </h1>
{{names}}
</body>
</html>
JS:
angular.module('myoneapp', [])
.controller('oneAppCtrl', function($scope,$http){
$scope.documentValue = {};
$http({method: 'GET',
url: 'http://localhost:70/DocumentRESTService.svc/GetDocuments/',
headers:
{
// 'Access-Control-Allow-Origin': 'http://localhost'
}
})
.success(function(data){ alert('Success!'); $scope.documentValue=data;})
.error(function(data){ alert('Error!'); $scope.documentValue=data; alert('Error!' + $scope.documentValue);})
.catch(function(data){ alert('Catch!'); $scope.documentValue= data;});
$http.get("http://www.w3schools.com/angular/customers.php")
.success(function(response) {$scope.names = response.records;});
});
странное поведение этот код отлично работает в IE11, тогда как он не работает в Chrome/Firefox.
следующий ответ в chrome: (для моей службы REST) , тогда как служба REST от w3schools работала просто отлично.
{"data":null,"status":0,"config":{"method":"GET","transformRequest":[null],"transformResponse":[null],"url":"http://localhost:70/DocumentRESTService.svc/GetDocuments/", "заголовки": {"Accept": "application/json, текст / обычный, /"}}, "statusText":""}
4 ответов
я мог бы решить эту проблему. Несколько способов сделать это - я записываю все, что я пробовал, и их рекомендации.
ответ Ques1.
'Why is localhost or my machineName considered to be a cross-domain request?'
как @charlietfl упоминалось, и я исследовал здесь: другой порт или поддомен также рассматривают кросс-домен браузером.
ответ Ques2.
'Are there any changes required to do at my service end to enable this behavior?'
да! это необходимо на самом сервере. Сервер должен ответить на запрос
Access-Control-Allow-Origin:*
заголовок. Здесь * может быть заменен самим заголовком запроса или согласно вашему требованию приложения. Отличный блог здесь объяснение обходного пути, если вы используете службу WCF REST. Вам нужно добавить следующую строку (заголовки) к каждому методу службы, чтобы включить CORS в методах службы.
WebOperationContext.Текущий.OutgoingResponse.Заголовки.Добавить (
"Access-Control-Allow-Origin", "*"); WebOperationContext.Текущий.OutgoingResponse.Заголовки.Добавить (
"Access-Control-Allow-Methods", " POST"); WebOperationContext.Текущий.OutgoingResponse.Заголовки.Добавить (
"Access-Control-Allow-Headers", "Content-Type, Accept");
спецификация здесь очень полезно для включения CORS на сервере / клиенте.
ответ на Ques3.
JSONP в основном работает для запросов GET и не наиболее целесообразное использование, а не включение CORS наиболее рекомендуется. (Я не исследовал эту область много, но Wiki & и StackOverflow статьи здесь было очень описательный).
кроме того, для целей тестирования, хороший хром здесь может быть полезным. Он может быть использован, чтобы гарантировать, что приложение имеет проблемы CORS.
Я слишком долго боролся с проблемами CORS, вызванными взаимодействием эмулированного ионного проекта (работающего локально) с небольшим узлом.Веб-службы JS (также работающие локально).
вот короткий простой обходной путь: плагин Chrome AllowControlAllowOrigin.
просто переключить переключатель с красного на зеленый, и не более заблокированный запрос, ошибка или предупреждение ! Конечно, это временное решение, и вам, возможно, придется положить руки в заголовки запросов, когда придет время остановить локальные тесты. Тем временем, это отличный способ избежать потери времени на эти повторяющиеся проблемы.
Если вы столкнулись с проблемой CORS в приложениях AngularJS при доступе к REST API, работающему на локальном компьютере, проверьте следующее: добавьте фильтр CORS в серверное приложение. В моем случае я добавил приведенный ниже код в Spring application
import java.io.IOException;
import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Component;
@Component
public class SimpleCORSFilter implements Filter {
private final Logger log = LoggerFactory.getLogger(SimpleCORSFilter.class);
public SimpleCORSFilter() {
log.info("SimpleCORSFilter init");
}
@Override
public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain)
throws IOException, ServletException {
HttpServletRequest request = (HttpServletRequest) req;
HttpServletResponse response = (HttpServletResponse) res;
response.setHeader("Access-Control-Allow-Origin", request.getHeader("Origin"));
response.setHeader("Access-Control-Allow-Credentials", "true");
response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
response.setHeader("Access-Control-Max-Age", "3600");
response.setHeader("Access-Control-Allow-Headers", "Content-Type, Accept, X-Requested-With, remember-me");
chain.doFilter(req, res);
}
@Override
public void init(FilterConfig filterConfig) {
}
@Override
public void destroy() {
}
}
в коде angularjs не указывайте URL, как http://localhost в:8080/../. Вместо localhost дайте свой IP-номер хоста.
Он будет работать должным образом