Angular JWT Auth — всегда 401 посторонний

Я создаю простой бэкэнд CakePHP. Для внешнего интерфейса я использую угловой. Angular подключается через API-интерфейс (используя плагин ADmad JWT) к бэкэнду и должен войти в систему, чтобы получить токен.

мой Api/UsersController.php

public function token()
{
$user = $this->Auth->identify();
if (!$user) {
throw new UnauthorizedException('Invalid username or password');
}
$this->set([
'success' => true,
'data' => [
'token' => JWT::encode(
[
'sub' => $user['id'],
'exp' =>  time() + 604800
],
Security::salt()
)
],
'_serialize' => ['success', 'data']
]);
}

Теперь, когда я хочу проверить свое соединение с почтальоном, (со следующими параметрами) это работает:

Request-Type: POST
URL:          http://cake3api.app/api/users/token.json
Headers:      Accept       => application/vnd.api+json
Content-Type => application/vnd.api+json
Body (JSON array):
{
"username":"test",
"password":"1234"}

Ответ:

 {
"success": true,
"data": {
"token": "HERE_COMES_THE_TOKEN_AS_ANSWER"}
}

Теперь я хочу использовать этот auth-api с Angular4. Я создал AuthServiceТак что я могу дать обещание к торт-апи:

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

@Injectable()
export class AuthService {

private BASE_URL: string = 'http://cake3api.app/api/users';
private headers: Headers = new Headers({
'Content-Type' : 'application/vnd.api+json',
'Accept' : 'application/vnd.api+json'
});

constructor(private http: Http) { }

login(user): Promise<any> {
let url: string = `${this.BASE_URL}/token.json`;
return this.http.post(url, user, {headers: this.headers}).toPromise();
}
}

И я звоню в службу в моем LoginComponent

import { Component, OnInit } from '@angular/core';
import { AuthService } from '../../services/auth.service';

@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})

export class LoginComponent implements OnInit {

constructor(private auth: AuthService) { }

ngOnInit(): void {
let sampleUser: any = {
username: 'test' as string,
password: '1234' as string
};

this.auth.login(sampleUser).then((user) => {
console.log(user.json());
}).catch((err) => {
console.log(err);
});
}

}

С этим я получаю следующее:

OPTIONS http://cake3api.app/api/users/token.json 401 (Unauthorized)

Ошибка загрузки http://cake3api.app/api/users/token.json: Ответ для
предпечатная проверка имеет недопустимый код состояния HTTP 401

// XHR Request & Response (from console)
**GENERAL**
Request URL:http://cake3api.app/api/users/token.json
Request Method:OPTIONS
Status Code:401 Unauthorized
Remote Address:127.0.0.1:80
Referrer Policy:no-referrer-when-downgrade

**RESPONSE HEADERS**
Access-Control-Allow-Headers:origin, x-requested-with, content-type
Access-Control-Allow-Methods:PUT, GET, POST, DELETE, OPTIONS
Access-Control-Allow-Origin:*
Connection:Keep-Alive
Content-Length:247
Content-Type:application/json; charset=UTF-8
Date:Fri, 27 Oct 2017 08:56:17 GMT
Keep-Alive:timeout=5, max=100
Server:Apache/2.4.27 (Win32) OpenSSL/1.0.2l PHP/7.1.9
X-DEBUGKIT-ID:ac7b0f38-4c97-44d4-8c26-9f95b94ce937
X-Powered-By:PHP/7.1.9

**REQUEST HEADERS**
Accept:*/*
Accept-Encoding:gzip, deflate
Accept-Language:de-DE,de;q=0.8,en-US;q=0.6,en;q=0.4,bs;q=0.2
Access-Control-Request-Headers:content-type
Access-Control-Request-Method:POST
Cache-Control:no-cache
Connection:keep-alive
Host:cake3api.app
Origin:http://localhost:4200
Pragma:no-cache
Referer:http://localhost:4200/login
User-Agent:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/61.0.3163.100 Safari/537.36

Кто-нибудь понял, почему это созвездие не работает? Я думаю, что angular отправляет запрос не так, как должен (отправлены неправильные заголовки?). Странно то, что мои тесты с почтальоном работали, но не с угловым.

Если кто-то думает, что это потому, что торт не принимает заголовок ORIGIN, он должен. Я включил контроль доступа в этом ./.htaccess

<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"Header add Access-Control-Allow-Headers "origin, x-requested-with, content-type"Header add Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS"</IfModule>

РЕДАКТИРОВАТЬ

Поскольку проблема, кажется, с отправкой браузера OPTIONSПо запросу я сделал обход, но все равно не работает.

RewriteEngine On
RewriteCond %{REQUEST_METHOD} OPTIONS
RewriteRule ^(.*)$ $1 [R=200,L]

Сообщение об ошибке исчезает, но пришло новое:

Ошибка загрузки http://cake3api.app/api/users/token.json: Ответ на
предпечатная проверка не проходит проверку контроля доступа: нет
Заголовок «Access-Control-Allow-Origin» присутствует в запрошенном
ресурс. ПроисхождениеHTTP: // локальный: 4200Поэтому не допускается
доступ.

Теперь написано, что заголовок Access-Control-Allow-Origin не установлен. Но я уже установил его в том же .htaccess файл, в который я положил OPTIONSОбходной путь запроса. Какая тревожная проблема, уже потеряли много времени на такие мелочи …