个人中心
gpt4 book ai didi

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

转载 作者：可可西里 更新时间：2023-11-01 02:37:41 25 4
gpt4 key购买 nike

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

我在本地主机 IIS 上托管了一个 RESTful WCF 服务。它定义了一个 GET 方法来获取文档列表:http://localhost:70/DocumentRESTService.svc/GetDocuments/

现在我正尝试在我的 Angular 应用程序中使用此服务并显示数据。以下是代码: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 服务工作得很好。

{"data":null,"status":0,"config":{"method":"GET","transformRequest":[null],"transformResponse":[null],"url":"http://localhost:70/DocumentRESTService.svc/GetDocuments/","headers":{"Accept":"application/json, text/plain, /"}},"statusText":""}

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

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

XMLHttpRequest 无法加载 http://localhost:70/DocumentRESTService.svc/GetDocuments/ .请求的资源上不存在“Access-Control-Allow-Origin” header 。因此不允许访问源“file://”。

  • [Chrome 控制台:使用 Brackets 托管]

XMLHttpRequest 无法加载 http://localhost:70/DocumentRESTService.svc/GetDocuments/ .请求的资源上不存在“Access-Control-Allow-Origin” header 。产地' http://127.0.0.1:55969 ' 因此不允许访问。

  • [Firefox 控制台:]

跨源请求被阻止:同源策略不允许读取位于 http://localhost:70/DocumentRESTService.svc/GetDocuments/ 的远程资源.这可以通过将资源移动到同一域或启用 CORS 来解决。

这里的问题很少:

  1. 为什么 localhost 或 my machineName 被认为是跨域请求？我在同一个域中，不是吗？
  2. 是否需要在我的服务端进行任何更改才能启用此行为？如果是，WCF 服务在哪里？(基于我阅读的内容 here)
  3. JSONP 在这种情况下有用吗？如果是，我将如何使用它？它可以处理需要自定义 header 的请求吗？(不确定它是什么，但在重新搜索时发现很多答案都提到了这一点。阅读链接会有所帮助。)

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

附言:

  • 集成开发环境:Brackets ，如果这很重要的话。
  • AngularJS v1.4.3
  • 我提到了各种涉及类似问题 (CORS) 的 stackoverflow 问题，其中涉及 $resource 、 $provider 、 $config ，还有一些与删除某些 header 和添加 header 中的某个值有关。我对此有点幼稚 - 任何对此的引用都会有所帮助。

最佳答案

我为模拟 Ionic 项目(在本地运行)与一些小型 Node.JS Web 服务(也在本地运行)的交互引起的 CORS 问题苦苦挣扎了太久。

看看简短的简单解决方法:Chrome 的插件 AllowControlAllowOrigin。

https://chrome.google.com/webstore/search/cross%20origin?utm_source=chrome-ntp-icon&_category=extensions

只需将单选按钮从红色切换为绿色，就不会再有阻塞的请求、错误或警告!当然，这是一个临时解决方案，当停止本地测试的时间到来时，您可能不得不 Handlebars 放在请求 header 中。与此同时，这是避免将时间浪费在那些反复出现的烦人问题上的好方法。

关于javascript - 从 angularjs 调用 REST 服务时本地主机上的 CORS 问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31612931/

25 4 0
文章推荐： routing - 无线路由和mac层引用
文章推荐： java - 如何生成具有给定数量的属性的给定数量的随机对象？
文章推荐： java - Spring eureka 仪表板在 wildfly 上返回 XML
文章推荐： javascript - leaflet Js 自定义控制按钮添加(文本、悬停)
可可西里
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com