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

【问题标题】：CORS issue on localhost while calling REST service from angularjs从 angularjs 调用 REST 服务时本地主机上的 CORS 问题
【发布时间】：2015-10-15 06:25:56
【问题描述】：

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

我在 localhost 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:(for my REST service) 中的响应，而 w3schools 的 REST 服务运行良好。

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

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

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

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

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

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

[Firefox 控制台：]

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

这里的问题很少：

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

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

PS：

IDE:Brackets，如果这很重要的话。
AngularJS v1.4.3
我已经提到了各种 stackoverflow 问题，这些问题涉及到类似的问题 (CORS)，其中涉及 $resource 、 $provider 、 $config ，还有一些与删除某些标头并在标头中添加一些值有关。我对此有点天真 - 任何对此的引用都会有所帮助。

【问题讨论】：

不同的端口或子域也被浏览器考虑跨域。大概您的页面正在不同的端口上打开？如何为任何服务器环境实施 CORS 到处都有很好的记录……简单的网络搜索。打开页面时也不能使用file:// 协议。甚至 CORS 也无济于事
您也通过 localhost url 加载页面？（相对于 file:// 或 127.0.0.1）
出于兴趣，IE 并不关心 CORS 的端口号——因此您可以使用它进行测试。或者，使用 chrome --args --disable-web-security 启动 chrome，它不会对 CORS 进行检查。
@TZHX 问题是忘记它已被禁用并在您的机器上留下安全漏洞。启用 CORS 是最理想的 IMO
@charlietfl 完全同意，从长远来看——但要开始做一些事情，了解解决方法会很有用。

标签： javascript angularjs wcf rest cors

【解决方案1】：

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

回答问题1。

'Why is localhost or my machineName considered to be a cross-domain request?'

正如@charlietfl 提到的，我研究了here：不同的端口或子域也被浏览器考虑跨域。

回答问题2。

'Are there any changes required to do at my service end to enable this behavior?'

是的！服务器端本身需要更改。服务器应该用

响应请求

访问控制允许来源：*

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

WebOperationContext.Current.OutgoingResponse.Headers.Add(
“访问控制允许来源”，“*”）； WebOperationContext.Current.OutgoingResponse.Headers.Add(
“访问控制允许方法”，“POST”）； WebOperationContext.Current.OutgoingResponse.Headers.Add(
"Access-Control-Allow-Headers", "Content-Type, Accept");

规范here 非常有助于在服务器/客户端上启用 CORS。

回答问题3。

JSONP 主要适用于 GET 请求并且不是最可取的使用，而是最推荐启用 CORS。（我没有深入探索这个领域，但 Wiki 和 stackoverflow 文章 here 非常具有描述性）。

除此之外，为了测试目的，一个漂亮的 chrome extension here 可能会有所帮助。它可用于确保应用程序存在 CORS 问题。

【讨论】：

所以这是对问题的回答，还是试图回答 cmets？
@Claies ：大多数情况下这可以被视为一个答案，但如果有人提出纠正/补充这种理解，请等待其他人回应。

【解决方案2】：

由于模拟 Ionic 项目（在本地运行）与一些小型 Node.JS Web 服务（也在本地运行）的交互导致的 CORS 问题，我苦苦挣扎了太久。

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

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

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

【讨论】：

这是迄今为止我遇到的最简单的解决方案。特别是在处理您无权访问的远程服务器时。

【解决方案3】：

如果您在访问 localhost 机器中运行的 REST API 时遇到 AngularJS 应用程序中的 CORS 问题，请检查以下内容：在您的服务器应用程序中添加 CORS 过滤器。就我而言，我在 Spring 应用程序中添加了以下代码

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 代码中，不要给出 http://localhost:8080/../ 之类的 URL。而不是 localhost 提供您的主机 IP 号。

它会正常工作

【讨论】：

我只是遇到了 express 和 angular2 的问题，我不必设置 Access-Control-* 标头，我只是将 angular 更改为指向 127.0.0.1:3000 并清除了问题了。谢谢！