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());
    }
}

it look like I need to send the 'Access-Control-Allow-Origin:*' or CORS with the _http request. but I am not able to do it. I checked the Angular4 documentation but no success. Please help me thanks.

Answer 1

CORS happens on the server side and the only headers necessary on the client side is the content type.

Example:

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());
    }

On the server side, to enable CORS there are several ways to do this. The easiest is to add this to your web.config after installing the Microsoft.AspNet.WebApi.Cors package from NuGet.

  <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>

More detailed information about CORS from Microsoft: https://docs.microsoft.com/en-us/aspnet/web-api/overview/security/enabling-cross-origin-requests-in-web-api

Answer 2

Correct answer is,

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());        
    }