Проблема с добавлением Xsrf-Token в Angular 6

Question

Отправка данных из формы, отправленной через API, прошла успешно.

Но после добавления X-CSRF-TOKEN в заголовок и установки withCredentials: true приведенные данные не были размещены в скрипте с именем insert.php

Ошибка:

Не удалось загрузить http://localhost/simple_api/insert.php: Ответ на предварительный запрос не проходит проверку контроля доступа: значение Заголовок «Access-Control-Allow-Origin» в ответе не должен быть подстановочный знак '*', когда режим учетных данных запроса 'include'. происхождения 'http://localhost:4200', следовательно, доступ запрещен. режим учетных данных запросов, инициированных XMLHttpRequest, управляется атрибутом withCredentials.

Удаление withCredentials: true полученные данные были успешно размещены. Но не вижу X-CSRF-TOKEN

app.module.ts

import { HttpModule } from '@angular/http';
import { AppRoutingModule } from './app-routing.module';
import {HttpClientModule, HttpClientXsrfModule} from "@angular/common/http";
import { UsrService } from './usr.service';
import { AppComponent } from './app.component';

@NgModule({
    declarations: [
      AppComponent,
      RegisterComponent,
      LoginComponent
    ],
    imports: [
      BrowserModule,
      FormsModule,
      HttpModule,
      AppRoutingModule,
      HttpClientModule,
      HttpClientXsrfModule.withOptions({
        cookieName: 'XSRF-TOKEN',
        headerName: 'X-CSRF-TOKEN'
      })
    ],
    providers: [UsrService],
    bootstrap: [AppComponent]
  })
  export class AppModule { }

user.services.ts

import { Http, Headers, RequestOptions, Response, URLSearchParams } from '@angular/http';
addUser(info){
    console.log(info);
    let headers = new Headers({ 'Content-Type': 'application/json' });
    let options = new RequestOptions({ headers: headers, withCredentials: true });
    console.log(options);
    return this._http.post("http://localhost/simple_api/insert.php",info, options)
      .pipe(map(()=>""));
  }

insert.php

<?php
$data = json_decode(file_get_contents("php://input"));
header("Access-Control-Allow-Origin: http://localhost:4200");
header("Access-Control-Allow-Headers: X-CSRF-Token, Origin, X-Requested-With, Content-Type, Accept");
?>

Утешая значения заголовка, Xsrf-Token не был установлен. Как мне установить значения Xsrf-Token?

---

UPDATE:

import {HttpClient, HttpClientModule, HttpClientXsrfModule} from "@angular/common/http";

constructor(private _http:HttpClient) { }

  addUser(info){
    console.log(info);
    // let headers = new Headers({ 'Content-Type': 'application/json' });
    // let options = new RequestOptions({ headers: headers, withCredentials: true });
    // console.log(options);
    return this._http.post("http://localhost/simple_api/insert.php",info)
        .subscribe(
                data => {
                    console.log("POST Request is successful ", data);
                },
                error => {
                    console.log("Error", error);
                }
            ); 
  }

app.module.ts

import {HttpClientModule, HttpClientXsrfModule} from "@angular/common/http";

imports: [
    ...
    HttpClientModule,
    HttpClientXsrfModule.withOptions({
      cookieName: 'XSRF-TOKEN',
      headerName: 'X-CSRF-TOKEN'
    })
  ],
...

Answer 1

На стороне сервера, XSRF-TOKEN - это не заголовок , а cookie для предварительной установки.Этот файл cookie следует отправлять с сервера на страницу, на которой находится ваше приложение Angular, то есть в приведенном ниже примере шаблон some.template.html.twig должен загружать приложение Angular.

Этоспособ Angular добавит и отправит правильный X-XSRF-etc.заголовок правильно.

Обратите внимание : файл cookie должен быть создан с параметром HttpOnly, установленным на FALSE , иначе Angular его не увидит.

Например, если вы используете Symfony, в действии контроллера вы можете установить файл cookie XSRF следующим образом:

namespace App\Controller;

use Symfony\Component\HttpFoundation\Cookie;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\Routing\Annotation\Route;
use Symfony\Bundle\FrameworkBundle\Controller\Controller;

class MyController extends Controller
{
  /**
   * Disclaimer: all contents in Route(...) are example contents
   * @Route("some/route", name="my_route")
   * @param Request $request
   * @return \Symfony\Component\HttpFoundation\Response
   */
  public function someAction(Request $request, CsrfTokenManagerInterface $csrf)
  {
    $response = $this->render('some.template.html.twig');
    if(!$request->cookies->get('XSRF-TOKEN')){
      $xsrfCookie = new Cookie('XSRF-TOKEN',
        'A_Token_ID_of_your_Choice',
        time() + 3600, // expiration time 
        '/', // validity path of the cookie, relative to your server 
        null, // domain
        false, // secure: change it to true if you're on HTTPS
        false // httpOnly: Angular needs this to be false
      ); 
      $response->headers->setCookie($xsrfCookie);
    }

    return $response;
  }
}

Answer 2

Добавьте следующий заголовок к вашему php-коду

header("Access-Control-Allow-Credentials: true");

Кроме того, почему вы смешиваете старый HttpModule и новый HttpClient модуль? RequestOptions и Headers устарели в угловых 6

Если вы используете HttpClient, тип контента по умолчанию уже установлен на json, а withCredentials устанавливается HttpClientXsrfModule.

Ваш запрос может быть упрощен до

 return this._http.post("http://localhost/simple_api/insert.php",info);

Редактировать Перехватчик по умолчанию, созданный за сценой HttpClientXsrfModule, похоже, не обрабатывает абсолютные URL-адреса ....

https://github.com/angular/angular/issues/18859