AngularJS + ASP.NET Web API Cross-Domain Issue

Question

Tiếp tục với quá trình học tập phát triển ứng dụng dành cho thiết bị di động của tôi, tôi đã tìm thấy một trở ngại mới: Cross-origin Request Sharing hoặc CORS.

Tôi đang sử dụng kết hợp AngularJS + jQuery Mobile (ứng dụng khách điện thoại Cordova) và ASP.NET Web API (chương trình phụ trợ). Vấn đề của tôi là tôi đã không thể hoàn thành một yêu cầu POST (hoặc bất kỳ loại yêu cầu nào khác) cho một bộ điều khiển API.

Bộ điều khiển AngularJS của tôi sử dụng phương thức dịch vụ $http.post() để gọi bộ điều khiển API Web. Tuy nhiên, trình gỡ lỗi Chrome nói rằng cuộc gọi không thành công trong yêu cầu OPTIONS (có thể là yêu cầu preflight CORS).

Tôi đã triển khai bộ chọn hành động CORS từ bài đăng sau: Enabling CORS in Web API Project. Thậm chí khó khăn, tôi có thể gọi phương thức api từ Fiddler, AngularJS vẫn thất bại trong yêu cầu preflight preflight.

Có điều gì tôi cần biết về AngularJS và các cuộc gọi tên miền chéo không? Bất kỳ giải pháp có thể cho tình trạng khó khăn của tôi?

Cảm ơn.

Answer 1

Kiểm tra các đối tượng Thinktecture Cors, với những thứ đó (bạn có thể sử dụng), bạn có thể nhận được hỗ trợ đầy đủ của CORS trong WebApi mà không cần bất kỳ mã nào của riêng bạn.

Ngay cả khi triển khai CORS chính xác, tôi đã gặp phải sự cố với IIS 7 đã được giải quyết bằng cách bật tất cả các động từ cho WebDav (vâng, WebDav - không hỏi tôi tại sao tôi làm theo hướng dẫn trên bài đăng blog: -D).

Làm điều này:

• quản lý mở IIS, vào Handler Mapping ứng dụng của bạn.
• Kích đúp vào handler WebDav
• Bấm "Yêu cầu Hạn chế"
• Trên "Verbs" tab, chọn "Tất cả các động từ".

Một lần nữa, không biết tại sao WebApi sử dụng WebDav, nhưng điều này giải quyết được vấn đề với POST và DELETE không hoạt động mặc dù thực hiện CORS đúng.

Answer 2

Bạn có thể bỏ qua yêu cầu tùy chọn preflight bằng cách sử dụng loại nội dung: application/x-www-form-urlencoded.

AngularJS:

var user = { 
    ID: 1, 
    Name: 'test' 
}; 

$http({ 
    url: "api.localhost/api/users/addUser", 
    method: "POST", 
    data: $.param(user), 
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, 
    withCredentials: true, 
    }).success(function (data, status, headers, config) { 
    console.log(data); 
}) 

Web api:

[HttpPost] 
public string AddUser(User user) 
{ 
    // Do something 
    return user.Name + " added"; 
} 

Web.config

<system.webServer> 
     <validation validateIntegratedModeConfiguration="false" /> 
      <handlers> 
       <remove name="ExtensionlessUrlHandler-ISAPI-4.0_32bit" /> 
       <remove name="ExtensionlessUrlHandler-ISAPI-4.0_64bit" /> 
       <remove name="ExtensionlessUrlHandler-Integrated-4.0" /> 
       <remove name="OPTIONSVerbHandler" /> 
       <remove name="TRACEVerbHandler" /> 

       <add name="ExtensionlessUrlHandler-ISAPI-4.0_32bit" path="*." verb="GET,HEAD,POST,DEBUG,PUT,DELETE,PATCH,OPTIONS" modules="IsapiModule" scriptProcessor="%windir%\Microsoft.NET\Framework\v4.0.30319\aspnet_isapi.dll" preCondition="classicMode,runtimeVersionv4.0,bitness32" responseBufferLimit="0" /> 
       <add name="ExtensionlessUrlHandler-ISAPI-4.0_64bit" path="*." verb="GET,HEAD,POST,DEBUG,PUT,DELETE,PATCH,OPTIONS" modules="IsapiModule" scriptProcessor="%windir%\Microsoft.NET\Framework64\v4.0.30319\aspnet_isapi.dll" preCondition="classicMode,runtimeVersionv4.0,bitness64" responseBufferLimit="0" /> 
       <add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="*" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" /> 
      </handlers> 
      <httpProtocol> 
       <customHeaders> 
        <add name="Access-Control-Allow-Origin" value="http://localhost" /> 
        <add name="Access-Control-Allow-Headers" value="Origin, X-Requested-With, Content-Type, Accept, Cache-Control" /> 
        <add name="Access-Control-Allow-Credentials" value="true" /> 
        <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" /> 
       </customHeaders> 
      </httpProtocol> 
     </system.webServer> 

Answer 3

Trong khi vấp ngã trên iss này ue với AngularJS 1.3 với Microsoft Web API 2 Tôi tìm thấy một giải pháp đơn giản cho vấn đề cấu hình CORS.

• đầu tiên từ NuGet intall - Microsoft WebAPI CORS

  Install-Package Microsoft.AspNet.WebApi.Cors 
  

• Sau đó, trong WebApiConfig.cs tập tin của bạn:

  var cors = new System.Web.Http.Cors.EnableCorsAttribute("www.my-angular-web-site.com", "*", "*"); 
  
  config.EnableCors(cors); 
  

Bạn cũng có thể kích hoạt CORS khắp mọi nơi với một * thay vì trang web của bạn nhưng điều đó đánh bại mục đích của CORS và mở lỗ hổng bảo mật - nhưng bạn có thể làm điều đó để thử nghiệm.

Việc lắp ráp WebApi.Cors cũng cho phép bạn bật bộ điều khiển cors bằng bộ điều khiển hoặc với các chi tiết chi tiết khác. Các chi tiết khác có thể được tìm thấy here trên trang Web API.