时间戳

首页 > 解决方案 > 使用 Angular js 调用 WEB API 时出现 CORS 问题

angularjs - 使用 Angular js 调用 WEB API 时出现 CORS 问题

问题描述

我正在开发我的第一个演示应用程序，该应用程序用于使用 web api 和 angular JS 在 UI 上显示人员详细信息。如果我使用“chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-security" 启动 Chrome，我的代码工作正常，但它不适用于普通的 Chrome/IE。我做了一些调试，发现这似乎是 CORS 问题。我也尝试在 api 端启用 CORS，但对我不起作用。有人可以帮我让它工作吗？提前致谢。下面是我的代码片段：

网络接口： 

 public class HomeController : ApiController
 { 
 public HttpResponseMessage GetPersonDetails()
 {
 var person = new List<person>
 {
 new Person {Id=1, Address="Pune", Name="Test1"},
 new Person {Id=2, Address="Pune", Name="Test2"},
 new Person {Id=3, Address="Pune", Name="Test3"},
 new Person {Id=4, Address="Pune", Name="Test4"}
 };
 return Request.CreateResponse(HttpStatusCode.OK, person); 
 }
 }

角码：

var appModule = angular.module("MyApp", []);

appModule.controller('getUserDetailsController', function ($scope, $http) {
           $http({
               method: 'GET',
               url: 'http://localhost:61896/api/Home/GetPersonDetails',
               headers: {

                   'Access-Control-Allow-Headers': '*',
                   'Access-Control-Allow-Methods': '*',
                   'Access-Control-Allow-Origin': '*'

               },
               contentType:'text/plain; charset=UTF-8'
           }).then(function (response) {

               $scope.objUserDetails = response.data;


           });
       });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

我尝试在 api 端启用 CORS，也尝试从 js 发送标头，但对我没有任何作用。

标签： angularjsangularjs-directiveangularjs-scope

解决方案

根据您的回复，您需要在属性中进行一些更正。

  • 从源中删除分号

  • 在标题和方法中添加 *

    [EnableCors（来源：“ http://localhost:61896 ”，标题：“ ”，方法：“ ”）]

只需按原样使用上述 EnableCors 属性，您的问题就应该得到解决。

注意：当我发布答案时，总是以某种方式删除 *。如果您的标头和方法中没有 *，请不要忘记添加 *。

第二件事是在 WebApiConfig.cs 文件的 Register 方法中寻找 config.EnableCors()

推荐阅读