Angular 5 HttpClient忽略了来自WordPress REST API的Post-Cookie标头

Question

我已经在Google上搜索了很多，但似乎无法找到解决我问题的明确答案。 许多类似的情况/解决方案，但没有一个对我有用。

我的设置如下：

环境 ：XAMP，Wordpress 4.9和在Angular 5之上运行的Angular Material Design

后端（REST API服务器） ：我有一个可以正常运行的Wordpress设置，可以在以下地址顺利运行： http：// localhost /〜XXXX / wordpress 。 我打算仅使用后端，以便通过内置的json REST API接口将数据提供给客户端，为此，我为它设置了一个自定义/测试端点：

add_action('rest_api_init', function () {

    register_rest_route('cookie-test/v1', 'set', [
      'methods' => 'POST',
      'callback' => function () {
          setcookie('cookieKey', $_POST['cookieValue'], time()+60*60*24*30);
          return [
            'responseKey' => 'responseValue',
          ];
      },
    ]);
});

实际上，我要实现的是针对前端的某种基于cookie的身份验证，而不是基于wordpress的身份验证！ 这段（伪）代码基本上是一个测试平台，目的是检查Cookie的正确功能/在后端和前端之间的交换。

前端 ：（部分）

// auth.service.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';

import 'rxjs/add/operator/map';
import 'rxjs/add/operator/mergeMap';

@Injectable()
export class AuthService
{
    constructor(
        private http: HttpClient
    )
    {
    }

    cookieTest() {
        return this.http.post(
            'http://localhost/~XXXX/wordpress/wp-json/cookie-test/v1/set',
            {cookieValue: 'randomValue'},
            {
                observe: 'response', // Full response instead of the body only
                withCredentials: true, // Send cookies
            }
        );
    }
}

// login.component.ts

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

import { Router } from '@angular/router';
import { AuthService } from '../services/auth.service';

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

export class LoginComponent implements OnInit
{
    loginForm: FormGroup;
    loginFormErrors: any;

    constructor(
        private formBuilder: FormBuilder,
        private authService: AuthService,
        private router: Router,
    )
    {
        this.loginFormErrors = {
            email   : {},
            password: {}
        };
    }

    ngOnInit()
    {
        this.loginForm = this.formBuilder.group({
            email   : ['', [Validators.required, Validators.email]],
            password: ['', Validators.required],
        });
    }

    onCookieTest()
    {
        this.authService.cookieTest()
            .subscribe(
                response => {
                    const keys: string[] = response.headers.keys();
                    console.log(keys);
                    console.log(response);
                },
                error => {
                    console.log(error);
                }
            );
    }
}

问题 ：前端可以到达wordpress REST API端点，而端点又可以正确响应角度的“ post”请求， 但是 ...但是未在浏览器中设置cookie！

从浏览器的调试器控制台中，我可以看到POST响应中的Set-Cookie标头包含正确的字段，但显然浏览器（或Angular的HttpClient？）完全忽略了它！

谷歌搜索我找不到关于<Wordpress REST API> / Angular5的任何信息。 各种各样的后端（ruby，laravel，java，C＃等），但是与Angular5的HttpClient的Wordpress无关。

这些是标题：

请求（OPTIONS）

Access-Control-Request-Headers  content-type
Referer http://localhost:4200/auth/login
Origin  http://localhost:4200
Accept  */*
User-Agent  ...
Access-Control-Request-Method   POST

回应（OPTIONS）

Transfer-Encoding   Identity
Connection  Keep-Alive
X-Powered-By    PHP/7.0.14
Access-Control-Allow-Methods    OPTIONS, GET, POST, PUT, PATCH, DELETE
Access-Control-Expose-Headers   X-WP-Total, X-WP-TotalPages
Vary    Origin
Access-Control-Allow-Headers    x-wp-nonce, Authorization, Content-Type
Server  Apache/2.4.16 (Unix) PHP/7.0.14 OpenSSL/0.9.8zg
Content-Type    application/json; charset=UTF-8
Access-Control-Allow-Credentials    true
Date    Thu, 12 Apr 2018 19:20:43 GMT
Access-Control-Allow-Origin http://localhost:4200
Keep-Alive  timeout=5, max=100
X-Content-Type-Options  nosniff
X-Robots-Tag    noindex
Link    <http://localhost/~XXXX/wordpress/wp-json/>; rel="https://api.w.org/"
Allow   POST

要求（POST）

DNT 1
Content-Type    application/json
Referer http://localhost:4200/auth/login
Accept  application/json, text/plain, */*
User-Agent  ...
Origin  http://localhost:4200

回应（POST）

Transfer-Encoding   Identity
Connection  Keep-Alive
X-Powered-By    PHP/7.0.14
Access-Control-Allow-Methods    OPTIONS, GET, POST, PUT, PATCH, DELETE
Set-Cookie  cookieKey=randomValue; expires=Sat, 12-May-2018 19:20:53 GMT; Max-Age=2592000
Access-Control-Expose-Headers   X-WP-Total, X-WP-TotalPages
Vary    Origin
Access-Control-Allow-Headers    x-wp-nonce, Authorization, Content-Type
Server  Apache/2.4.16 (Unix) PHP/7.0.14 OpenSSL/0.9.8zg
Content-Type    application/json; charset=UTF-8
Access-Control-Allow-Credentials    true
Date    Thu, 12 Apr 2018 19:20:52 GMT
Access-Control-Allow-Origin http://localhost:4200
Keep-Alive  timeout=5, max=100
X-Content-Type-Options  nosniff
Link    <http://localhost/~XXXX/wordpress/wp-json/>; rel="https://api.w.org/"
X-Robots-Tag    noindex
Allow   POST

预先感谢您的任何帮助/提示

Answer 1

您需要在后端指定路径（例如，根路径）

setcookie('cookieKey', $_POST['cookieValue'], time()+60*60*24*30, '/')

如果您在设置cookie时未指定路径，则该路径仅在当前路径（ .../wp-json/cookie-test/v1/set ）上可用，这意味着cookie不会如果您在该域上尝试其他路径，则在将来的请求中被发送到后端