Angular2 Post application/json

Question

Я получаю ошибку 405 при попытке приложения POST/json с помощью Angular2. Я знаю, что это не проблема CORS, потому что все заголовки ответов сервера находятся на месте (Access-Control-Allow-Headers, Access-Control-Allow-Methods, Access-Control-Allow-Origin), и я могу сделать POST, когда Тип контента - application/x-www-form-urlencoded.

Есть ли известная проблема с попыткой приложения POST/json с Angular2?

Код на стороне сервера написан на C#, используя MS Web API с сервером IIS.

Запросить информацию:

Request URL:http://localhost:9090/api/Authentication/login 
Request Method:OPTIONS 
Status Code:405 Method Not Allowed 
Remote Address:[::1]:9090 
Response Headers 
view source 
Access-Control-Allow-Headers:Content-Type 
Access-Control-Allow-Methods:GET, POST, PUT, DELETE, OPTIONS 
Access-Control-Allow-Origin:* 
Allow:POST 
Cache-Control:no-cache 
Content-Length:76 
Content-Type:application/json; charset=utf-8 
Date:Fri, 18 Mar 2016 14:27:27 GMT 
Expires:-1 
Pragma:no-cache 
Server:Microsoft-IIS/7.5 
X-AspNet-Version:4.0.30319 
X-Powered-By:ASP.NET 
Request Headers 
view source 
Accept:*/* 
Accept-Encoding:gzip, deflate, sdch 
Accept-Language:en-US,en;q=0.8 
Access-Control-Request-Headers:content-type 
Access-Control-Request-Method:POST 
Connection:keep-alive 
Host:localhost:9090 
Origin:http://localhost:3000 
Referer:http://localhost:3000/login 
User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/49.0.2623.87 Safari/537.36 

Код:

import { Component, View } from 'angular2/core'; 
import { Router, RouterLink } from 'angular2/router'; 
import { CORE_DIRECTIVES, FORM_DIRECTIVES } from 'angular2/common'; 
import { Http, Headers, RequestOptions} from 'angular2/http'; 

@Component({ 
    selector: 'login' 
}) 
@View({ 
    directives: [RouterLink, CORE_DIRECTIVES, FORM_DIRECTIVES], 
    templateUrl: 'app/login/login.html', 
    styles: ['app/login/login.css'] 
}) 
export class Login { 
    constructor(public router: Router, public http: Http) { 
    } 

    login(event, username, password) { 
     event.preventDefault(); 
     let body = JSON.stringify({ userName: "user", password: "pwd", apiKey: "key", role: "role" }); 
     let headers = new Headers({ 'content-type': 'application/json' }); 
     let options = new RequestOptions({ headers: headers }); 
     this.http.post('http://localhost:9090/api/Authentication/login', body, options) 
      .subscribe(
       response => { 
        localStorage.setItem('jwt', response.json().id_token); 
        this.router.parent.navigateByUrl('/home'); 
       }, 
       error => { 
        alert(error.text()); 
        console.log(error.text()); 
       } 
      ); 
    } 

    signup(event) { 
     event.preventDefault(); 
     this.router.parent.navigateByUrl('/signup'); 
    } 
} 

Answer 1

Я нашел article что четко заявляет применение/JSON не допускается в запросе CORS. Тьерри благодарит вас за предложение увидеть запрос/ответ jQuery, потому что он заставил меня понять, что я обслуживаю html-страницу с того же сервера, который обрабатывал запрос, поэтому я не сталкивался с проблемой CORS. Я добавлю виртуальный каталог для сопоставления проекта ng2, чтобы он мог обслуживаться с того же сервера, который обслуживает запросы.

Answer 2

Я потратил часы, чтобы найти последовательный ответ на этот вопрос. Просто добавив следующее в раздел веб-службы, web.config исправил это для меня.

<httpProtocol> 
    <customHeaders> 
    <add name="Access-Control-Allow-Origin" value="*"/> 
    <add name="Access-Control-Allow-Headers" value="Content-Type"/> 
    </customHeaders> 
</httpProtocol>