2016-06-20 7 views
2

나는 우리 회사 직원들이 아우렐 리아를 사용하여 즉석에서 판매하려는 제품이나 서비스에 대한 광고를 올릴 수있는 작은 포럼을 만들고 있습니다. 나는 잘 작동하는 광고 페이지 목록을 가지고 있는데, 각각의 광고에 대한 세부 정보 페이지는 api에서 요청을 얻음으로써 잘 작동한다. 그러나 누군가가 광고에 코멘트를 추가하려고 할 때 나는 포스트 reqeust 일을 얻는 것처럼 보일 수 없다.http-fetch-client가 옵션 요청을 작성하는 Post

@inject(HttpClient) 
export class ApiData { 
    constructor(httpClient) { 
     httpClient.configure(config => { 
      config 
       .withBaseUrl("MyUrl"); 
     }); 
     this.http = httpClient; 
     //.configure(x => {x.withHeader('Content-Type', 'application/json');}); 
    } 

    postAdvertComment(comment, id) { 
     return this.http.fetch(`/adverts/${id}/comments`, { 
      method: "post", 
      body: json(comment), 
      headers: { 
       'Accept': 'application/json' 
      } 
     }); 
    } 

    getAdverts() { 
     return this.http.fetch("/adverts") 
      .then(response => { 
       return this.adverts = response.json(); 
      }); 
    } 

    getAdvert(id) { 
     return this.http.fetch(`/adverts/${id}`) 
      .then(response => { 
       return this.advert = response.json(); 
      }); 
    } 
} 

우리가 CORS 몇 가지 문제를 가지고 한이 프로젝트, 모두 내가 시도하고 게시물을 실행하지만 때 등 모든 방법

<add key="CorsAllowedOrigins" value="*" /> 
<add key="CorsAllowedHeaders" value="" /> 
<add key="CorsAllowedMethods" value="*" /> 

을 포함하여 API의 AllowCors 태그에 추가하여 해결을하는 , 옵션 메소드를 실행하고 400 Bad 요청을 리턴합니다. Here

우리는 또한 다음과 같은 CORS 오류 얻을 : 그것은 우리의 C#을 API를 사용하거나 내가 아우렐 리아에서 게시하기 위해 노력하고있어 방법에 문제가 있는지 모르겠어요

Fetch API cannot load MyURL/api/adverts/2/comments. Response to preflight 
request doesn't pass access control check: No 'Access-Control-Allow-Origin' 
header is present on the requested resource. Origin 'http://localhost:49877' is 
therefore not allowed access. The response had HTTP status code 400. If an 
opaque response serves your needs, set the request's mode to 'no-cors' to fetch 
the resource with CORS disabled. 

을하지만, 우리는 시도 우편 배달부에서 요청을 보내고 잘 작동, jquery를 사용하여 동일한 응용 프로그램 내에서 게시물 요청을 보내려고하고 괜찮 작동하고 모든 요청을 잘 작동하지만, 어떤 이유로이 게시물은 모든 종류의 문제가 발생합니다.

답변

2

WebAPI에 문제가있는 것 같지만 몇 가지 가능한 해결책을 제시하기 전에 몇 가지 중요한 것을 보여 드리고 싶습니다.

  • 우편 배달부는 CORS의 영향을받지 않으므로 모든 요청이 처리됩니다.
  • jQuery ajax는 XHR (XmlHttpRequest 개체)을 사용하고 aurelia-fetch-client은 fetch (window.fetch)를 사용하지만 fetch-polyfill은 백그라운드에서 XHR을 사용합니다. 그들은 동일한 문제를 해결하기 위해 서로 다른 접근법 인 입니다. 그 중 하나가 작동하기 때문에 실제로 다른 하나도 작동해야한다는 것을 의미하지는 않습니다.
  • OPTIONS 요청은 가져 오기로 만들어 지므로 작동하는 방식입니다. 자세한 내용은 여기

https://developers.google.com/web/updates/2015/03/introduction-to-fetch?hl=en이 문제가 Startup.cs에 CORS를 Web.config의에서 해당 태그를 제거 할 수 있도록 노력 해결합니다. 이와 같이 :

public void Configuration(IAppBuilder app) 
{ 
    app.UseCors(CorsOptions.AllowAll); //or another parameter 
    //rest of your code 
} 

application/json으로 콘텐츠 유형 헤더를 설정할 필요는 없습니다. json() 기능을 사용하면 자동으로 만들어집니다. --->body: json(comment)

OWIN을 사용하는 경우 content-type을 x-www-form-urlenconded로 보내야 할 수 있습니다. 이 경우 살펴보기 Post 'x-www-form-urlencoded' content with aurelia-fetch-client