CORS发布Angular4和C＃Web API

Question

I have a web API that runs on http://localhost:59543/ for which I have enabled the CORS by adding the following to Web.config

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

I have a angular 4 project that run on http://localhost:4200/ . I use the following code to make an HTTP request

LoginService

@Injectable()
export class LoginService extends BaseService {

    request: Http;

    constructor(request: Http) {
        super(request);
        this.request = request;
    }

    postLogin(body: Object): Observable<any> {
        var options = this.options;
        options.method = "POST";
        return this.request.post(AppSettings.apiURL + "api/Login", body, options)
            .map(this.extractData)
            .catch(this.handleError);
    }
}

Base Service

@Injectable()
export class BaseService {

    headers: Headers;
    options: RequestOptions;

    constructor(private http: Http) {

        this.headers = new Headers();

        let token: string = localStorage.getItem("TOKEN");

        if (token != undefined)
            this.headers.append("AUTH_TOKEN", token);

        this.options = new RequestOptions({ headers: this.headers });
    }

    public extractData(res: Response) {
        let body = res.json();
        return body || {};
    }

    public handleError(error: Response | any) {
        return Observable.throw(error.message || error);
    }

}

Issue

When I set the header for HTTP request

this.headers.append("AUTH_TOKEN", token);

I am getting the following error

api/Login: 1 Failed to load resource: the server responded with a status of 405 (Method Not Allowed)

:4200/#/login:1 Failed to load http://localhost:59543/api/Login : Response for preflight has invalid HTTP status code 405.

But when I remove the header it works. Any advice or guidance would be greatly appriciated.

Answer 1

Your should pass token with token type like,

this.headers.append("Authorization", "bearer "+token);

Here, bearer is your token type. It would be another which you set is default.