使用 Angularjs 和 wcf RESTful 服务制作 http.post 时出现 CORS 问题

Question

我是 angularjs 的新手，并尝试使用 angularjs 客户端使用 wcf restful 服务。最初我尝试了 http.get(url) 并得到了我通过将以下代码放入我想要的 wcf 服务方法中解决的 CORS 问题打电话。

WebOperationContext.Current.OutgoingResponse.Headers.Add("Access-Control-Allow-Origin", ""); WebOperationContext.Current.OutgoingResponse.Headers.Add("Access-Control-Allow-Methods", "POST,GET,OPTIONS"); WebOperationContext.Current.OutgoingResponse.Headers.Add("Access-Control-Allow-Headers", "Content-Type, Accept");*

现在，当我以与 get 相同的方式发出后调用 (http.post) 时，我得到了回复，但没有出现 CORS 问题。

但是当我尝试在发帖时传递 JSON 对象时，我再次开始遇到 CORS 问题。

我的帖子角码是：

 var requestData = {
            RequestUserName: "Abc1",
            RequestPass: "123"
        };

        var req = {
                    method: 'POST',
                    url: 'url',
                    headers: {
                        'Content-Type': 'application/json; charset=utf-8'
                    },
                    data: requestData
        };
         $http(req).success(function(){console.log("Success");
         $scope.userDetails = response.UserNameAuthenticationResult;}).error(function(){console.log("Error");});

我的 WCF 操作合约如下：

 [WebInvoke(Method="POST",UriTemplate="/Authenticate"
           ,RequestFormat=WebMessageFormat.Json
           ,ResponseFormat=WebMessageFormat.Json
           ,BodyStyle = WebMessageBodyStyle.Wrapped)]

        string UserNameAuthentication(Request request);

方法实现如下：

 public string UserNameAuthentication(Request request)
       {
         WebOperationContext.Current.OutgoingResponse.Headers.Add("Access-Control-Allow-Origin", "*");
       WebOperationContext.Current.OutgoingResponse.Headers.Add("Access-Control-Allow-Methods", "POST,GET,OPTIONS");
      WebOperationContext.Current.OutgoingResponse.Headers.Add("Access-Control-Allow-Headers", "Content-Type, Accept");

           return "true";
       }

我得到的错误如下：

**OPTIONS URL (匿名函数) @ angular.js:11442sendReq @ angular.js:11235serverRequest @ angular.js:10945processQueue @ angular.js:15552（匿名函数）@ angular.js:15568$eval @ angular.js:16820$digest @ angular.js:16636$apply @ angular.js:16928（匿名函数）@ angular.js:24551defaultHandlerWrapper @ angular.js:3398eventHandler @ angular.js:3386 localhost/:1 XMLHttpRequest 无法加载 http://localhost:8733/TestService/Login/Authenticate。响应 预检请求未通过访问控制检查：否 请求中存在“Access-Control-Allow-Origin”标头 资源。因此不允许使用原点“http://localhost:14703” 使用权。响应的 HTTP 状态代码为 405。

Answer 1

CORS 是浏览器和服务器设置之间的交互。

同时发布请求和响应标头会很有用。

我假设您正在与位于不同域（例如 api.example.com 而不是 www.example.com）上的 API 进行交互。由服务器设置 Access-Control-Allow-Origins 响应标头。要允许所有来源作为临时措施，请将其设置为“*”而不是空字符串，但很快您应该将其设置为您网站的实际来源，例如 www.example.com

实际上，您可能不希望它完全打开，因为这可能存在安全风险，有人可能会创建您网站的假冒版本。

同时避免 CORS 的一种简单方法是使用代理服务器。这样，所有请求都转到同一个域（html 和 API）。如果运行 Node 应用程序，您可以使用 node-http-proxy 或类似的。如果您有自定义标头或数据，这也可以避免预检请求。预检请求是您在实际请求之前在 API 上看到的 OPTIONS 请求。

以下是有关预检行为的更多信息： https://www.soasta.com/blog/options-web-performance-with-single-page-applications/

Answer 2

似乎没有在服务器端启用 CORS，因为不理解 OPTIONS 方法。

不妨试试这个：

protected void Application_BeginRequest(object sender, EventArgs e)
{
    HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", "*");
    if (HttpContext.Current.Request.HttpMethod == "OPTIONS")
    {
        HttpContext.Current.Response.AddHeader("Access-Control-Allow-Methods", "POST, PUT, DELETE, OPTIONS");

        HttpContext.Current.Response.AddHeader("Access-Control-Max-Age", "1728000");
        HttpContext.Current.Response.End();
    }
}