Apache CORS OPTIONS request status 501 error

Question

Angular 2 http post not setting content type

Im trying to set headers on http.post with no luck.

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

import { User } from '../_models/index';

@Injectable()
export class UserService {
constructor(private http: Http) { }

create(username: string, firstname: string, lastname: string, email: string, password: string) {
    let headers = new Headers({
        'Accept' : 'application/json',
        'Content-Type': 'application/json'
    });
    let options = new RequestOptions({ headers: headers, method: 'post' });

    return this.http.post(
        'http://127.0.0.1:8080/api/users/register',
        JSON.stringify({username, firstname, lastname, email, password}),
        options
        // this.jwt()
    ).map(
        (response: Response) => response.json()
    );
}

I've set headers on my apache config

    <Directory /var/www/stockwatch_api>
            Header set Access-Control-Allow-Origin "*"
            Header set Access-Control-Allow-Headers "Content-Type"
            Header set Access-Control-Allow-Methods "POST, PUT, DELETE, GET, HEAD"

I've also set the same headers in my cakephp api app.

I'm getting this response:

Status Code: 501 Not Implemented

Answer 1

Try using headers.append()

let headers = new Headers();
headers.append('Accept', 'application/json');
headers.append('Content-Type', 'application/json');