415 - サポートされていないメディアタイプ

Question

import { Injectable } from '@angular/core'; 
import { Http } from '@angular/http'; 
import 'rxjs/add/operator/map'; 

import { Event, SearchParameters } from './event.model'; 

@Injectable() 
export class EventService {  
    private _url = "http://localhost:36888/api/HealthFairEvents"; 

    constructor(private _http: Http) { 

    } 

    getEvents(SearchParameters) {   
     return this._http.post(this._url + "/HealthFairEventSL", SearchParameters).map(res => res.json()); 
    } 

    getEvent(id: number) {   
     return this._http.get(this._url + "/GetHealthFairEvent/" + id).map(res => res.json()); 
    } 

    addEvent(event: any){ 
     console.log('add'); 
     console.log(JSON.stringify(event)); 
     return this._http.post(this._url + "/PostHealthFairEvent", JSON.stringify(event)).map(res => res.json()); 
    } 

    updateEvent(event: Event){ 
     console.log('update');   
     console.log(JSON.stringify(event)); 
     return this._http.put(this._url + "/PutHealthFairEvent/" + event.HealthFairEventId, JSON.stringify(event), 

     ).map(res => res.json()); 
    } 
} 

_httpリクエストで 'Access-Control-Allow-Origin：*'またはCORSを送信する必要があるようです。私はそれをすることができません。私はAngular4のドキュメントをチェックしましたが、成功しませんでした。ありがとうございました。

Answer 1

CORSはサーバー側で発生し、クライアント側で必要なヘッダーはコンテンツタイプのみです。

例：サーバー側で

import { Http, Response, Headers, RequestOptions } from '@angular/http'; 

getEvent(id: number) { 
     let headers = new Headers({ 'Content-Type': 'application/json' }); 
     let options = new RequestOptions({ headers: headers }); 
     return this._http.get(this._url + "/GetHealthFairEvent/" + id, options).map(res => res.json()); 
    } 

、CORSを有効にするには、この操作を行うには、いくつかの方法があります。最も簡単には、あなたのweb.configファイルにマイクロソフトからCORSについて

<system.webServer> 
    <httpProtocol> 
    <customHeaders> 
     <add name="Access-Control-Allow-Origin" value="http://localhost:4200" /> 
     <add name="Access-Control-Allow-Methods" value="*" /> 
     <add name="Access-Control-Allow-Credentials" value="true" /> 
    </customHeaders> 
    </httpProtocol> 
</system.webServer> 

installing the Microsoft.AspNet.WebApi.Cors package from NuGet.後のより詳細な情報をこれを追加することです：https://docs.microsoft.com/en-us/aspnet/web-api/overview/security/enabling-cross-origin-requests-in-web-api

Answer 2

正解はこれはバックエンドの問題であり、

updateEvent(event: HealthFairEvent){ 
     console.log('update');   
     console.log(JSON.stringify(event)); 
     let customHeader = new Headers(); 
        customHeader.append('Access-Control-Allow-Origin', '*'); 

     return this._http.put(this._url + "/XX/" + event.HealthFairEventId, event, { headers: customHeader }).map(res => res.json());   
    }