jQuery에서 WebApi 호출

Question

WebApi로 시작하여 여러 가지 문제가 있습니다. 수많은 정보를 읽지 만 일부 개념이 누락 된 것 같습니다. 내 컨트롤러에서

:

public IEnumerable<Product> GetProducts() 
    { 
     return db.Products.AsEnumerable(); 
    } 


    public Product GetProduct(string name) 
    { 
     Product product = db.Products.FirstOrDefault(p => p.Name == name); 
     if (product == null) 
     { 
      throw new HttpResponseException(Request.CreateResponse(HttpStatusCode.NotFound)); 
     } 

     return product; 
    } 

자바 스크립트 : 모든

$('#Search').click(function() { 
    jQuery.support.cors = true; 
    var productName = $('#Name').val(); 

    $.ajax({ 

     url: "http://localhost:62178/api/product", 
     //url: "http://localhost:62178/api/product/" + productName, 
     type: "GET", 
     success: function (data) { 
      alertData(data); 
     } 
    }); 
}); 

첫째,이 매개 변수 제품 이름을 전달하면 상관없이, 매개 변수가없는 GetProduct가 호출됩니다 (다시 데이터를 반환해야합니다). 이러한 GET 메서드를 모두 호출 할 수 있어야합니다. 둘째, success 함수가 호출되지 않습니다. 그래서 WebApi 메서드에서 데이터를 다시 얻지는 못합니다.

모든 도움말이나 안내에 감사드립니다. 감사. WebApiConfig.cs

public static class WebApiConfig 
{ 
    public static void Register(HttpConfiguration config) 
    { 
     config.Routes.MapHttpRoute(
      name: "DefaultApi", 
      routeTemplate: "api/{controller}/{id}", 
      defaults: new { id = RouteParameter.Optional } 
     ); 
    } 
} 

지금

만 문제는 내 데이터가 경고되지 않는다는 것입니다 :

$('#Search').click(function() { 
    jQuery.support.cors = true; 
    var productName = $('#Name').val(); 

    $.ajax({ 

     url: "http://localhost:62177/api/product/" + productName, 
     //data: { name: productName }, 
     type: "GET", 
     dataType: "jsonp", 
     error: function (request, status, error) { 
      alert(request.responseText); 
     }, 
     success: function (data) { 
      alert(data); 
     } 
    }); 
}); 

Answer 1

이

[HttpGet] 

그리고 매개 변수와 함께 UR 웹 API 메서드를 장식 해보십시오

[HttpGet] 
public Product GetProduct([FromUri]string name) 

그리고

routeTemplate: "api/{controller}/{name}" 

당신의 메서드 매개 변수의 이름

public Product GetProduct(string id) 

또는 경로에

Answer 2

변경하여 메소드 서명 중 하나를하려고 선택한 경로를 결정합니다.

Answer 3

이것은 대부분 동일한 출처 정책에 의한 것 같습니다. Visual Studio 솔루션에서 HTML 파일을 이동 한 다음 (예 : localhost : 62177/test.htm) Visual Studio를 사용하고 있다고 가정하고 거기에서 실행 해 봅니다. 이 방법으로 결과를 받으면 동일한 원산지 정책을 차단하는 것으로 확인됩니다. 모든

Answer 4

첫째, 난 당신이 Internet Explorer를 사용하여 웹 사이트를보고있는 있으리라 믿고있어 당신은 크롬과 그것을 시도하는 경우, 당신이 그냥 내게 일어난 콘솔에서 오류를 볼 수 있지만하지 않는 것이 사실 때문에 콘솔에서이 일에 오류가 유사한 표시되어야 오류가 표시되지 않는 경우

XMLHttpRequest cannot load http://localhost:44271/api/routes/1. Origin http://localhost:27954 is not allowed by Access-Control-Allow-Origin. 

, 당신은 여전히 ​​크롬의 개발자 도구의 네트워크 탭에서 네트워크 호출의 결과를 확인할 수 있습니다. 그것은 가장 가능성이처럼 사용할 수있는 응답이 없을 것이며, 그것이 실패한 요청 (안 200 개 상태)로 표시해야합니다

당신의 MVC 웹 사이트가 당신의 WebAPI보다 별도의 프로젝트에있는 경우,시 Visual Studio로 디버깅을 시작하면 IIS Express의 다른 응용 프로그램 (URLS)에 배포됩니다.이 의미

당신은 ASP.NET 팀은 최근 will be integrated directly to WebAPI on the next release을 발표 Brock Allen's CORS implementation for WebAPI을 사용하여이 문제를 해결할 수 있습니다, 당신의 WebAPI에 대한 호출이 그러나 때문에 CORS policy.

금지 될 것입니다.

오늘은 간단한 PoC를 만들어야했고 똑같은 문제가 있었으며이를 해결하기 위해 Brock의 구현을 성공적으로 사용했습니다. 단계는 매우 간단합니다.

1. ApiController를 변경할 필요가 없습니다.
2. 당신은 CORS 지원예요, 당신은 더 이상 오류가 발생되어서는 안
3. 를 등록 정적 방법의 App_Start 폴더
4. 당신은 그 CorsConfig 클래스에 대한 호출을 추가로 CorsConfig 클래스를 추가 할 수 있습니다. 이 CORS 구성을 사용하면 CORS가 모든 방법, 모든 요청 및 모든 출처에 대해 호출 할 수 있습니다. 방금 PoC에 사용했습니다. 라이브러리의 유창한 구성 방법을 사용하면 더 제한적 일 수 있습니다.

CorsConfig.cs

public static void RegisterCors(HttpConfiguration httpConfig) 
{ 
    WebApiCorsConfiguration corsConfig = new WebApiCorsConfiguration(); 

    // this adds the CorsMessageHandler to the HttpConfiguration’s 
    // MessageHandlers collection 
    corsConfig.RegisterGlobal(httpConfig); 

    // this allow all CORS requests to the Products controller 
    // from the http://foo.com origin. 
    corsConfig.AllowAll(); 
} 

Global.asax에

protected void Application_Start() 
    { 
     AreaRegistration.RegisterAllAreas(); 
     WebApiConfig.Register(GlobalConfiguration.Configuration); 
     FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters); 
     RouteConfig.RegisterRoutes(RouteTable.Routes); 

     CorsConfig.RegisterCors(GlobalConfiguration.Configuration); 
    } 

Answer 5

부분적인 대답 - 당신이 JQuery와 아약스 호출에
단지 명확성을 위해이 데이터 PARAM을 설정해야합니다 -
아마도 "데이터"를 반환 값으로 사용하면 안됩니다. var
(ic

$.ajax({ 
    url: "http://localhost:62178/api/product", 
    data: {name: productName}, 
    type: "GET", 
    success: function (result) { 
     alertData(result); 
    } 
});