从angularjs调用REST服务时，本地主机上的CORS问题

颜嘉誉

2023-03-14

问题内容：

我正在学习angularJS并尝试在我的应用程序中实现它。

我在本地主机IIS上托管了RESTful WCF服务。它具有定义为获取文档列表的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服务），而来自w3schools的REST服务运行正常。

{“数据”：null，“状态”：0，“配置”：{“方法”：“ GET”，“ transformRequest”：[null]，“
transformResponse”：[null]，“ url”：“ http：/
/localhost:70/DocumentRESTService.svc/GetDocuments/
“，”标题“：{” Accept“：”应用程序/ json，文本/纯文本， / “}}，” statusText“：”“}

控制台显示以下错误消息。

[Chrome控制台：通过从 文件系统 打开]

XMLHttpRequest无法加载http：// localhost：70 / DocumentRESTService.svc /
GetDocuments
/。所请求的资源上没有“
Access-Control-Allow-Origin”标头。因此，不允许访问源“ file：//”。

[Chrome控制台：使用括号托管]

XMLHttpRequest无法加载http：// localhost：70 / DocumentRESTService.svc /
GetDocuments
/。所请求的资源上没有“
Access-Control-Allow-Origin”标头。因此，不允许访问来源’
http://127.0.0.1:55969 ‘。

[Firefox控制台：]

跨域请求被阻止：同源策略禁止读取位于http：// localhost：70 / DocumentRESTService.svc /
GetDocuments
/的远程资源。可以通过将资源移到同一域或启用CORS来解决此问题。

这里的问题很少：

为什么将localhost或我的machineName视为跨域请求？我在同一个域中，不是吗？
在服务端需要进行任何更改才能启用此行为吗？如果是的话，WCF服务在哪里？（根据我在此处阅读的内容）
在这种情况下，JSONP是否有用？如果是，我将如何使用它？它是否可以与需要自定义标头的请求一起使用？（不十分确定这是什么，但是在进行重新搜索时发现了很多提及此问题的答案。阅读链接会有所帮助。）

任何帮助或指导都会有所帮助。

PS：

IDE：括号，如果有的话。
AngularJS v1.4.3
我提到了各种stackoverflow问题，它们都引用了类似的问题（CORS），其中涉及$ resource，$ provider，$ config，还有一些涉及删除某些标头并为标头之一添加一些值。我对此有点天真-任何对此的引用都会有所帮助。

问题答案：

我可以解决这个问题。这样做的几种方法-我记下了我尝试过的所有内容及其参考。

回答问题1。

'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?'

是！服务器端本身需要进行更改。服务器应使用以下命令响应请求

访问控制允许来源：*

标头。在这里*可以替换为请求标头本身或根据您的应用程序要求。如果您使用的是WCF
REST服务，则此处的优秀博客介绍了解决方法。您需要在每个服务方法中添加以下行（标题），以在服务方法中启用CORS。

WebOperationContext.Current.OutgoingResponse.Headers.Add（
“ Access-Control-Allow-Origin”，“ *”）;
WebOperationContext.Current.OutgoingResponse.Headers.Add（
“ Access-Control-Allow-Methods”，“ POST”）;
WebOperationContext.Current.OutgoingResponse.Headers.Add（
“ Access-Control-Allow-Headers”，“ Content-Type，Accept”）;

此处的规范对于在服务器/客户端上启用CORS非常有帮助。

回答问题3。

JSONP通常适用于GET请求，不是最可取的用法，最建议启用CORS。（我没有对此领域进行过很多探讨，但此处的Wiki和stackoverflow文章具有很强的描述性）。

除此之外，出于测试目的，此处提供了不错的chrome
扩展名可能会有所帮助。它可以用来确保应用程序存在CORS问题。

从angularjs调用REST服务时，本地主机上的CORS问题

相关阅读

相关文章

相关问答

相关工具

相关文档