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

Публикация данных из формы отправки через API прошла успешно.

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

Ошибка:

Ошибка загрузки Http: //localhost/simple_api/insert.php: Ответ на
предварительный запрос не проходит проверку контроля доступа: значение
Заголовок «Access-Control-Allow-Origin» в ответе не должен быть
подстановочный знак ‘*’, когда режим учетных данных запроса ‘include’. происхождения
HTTP: // локальный: 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?


ОБНОВИТЬ:

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'
})
],
...

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

3

Другие решения

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

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

пожалуйста, обратите внимание: файл cookie должен быть создан с параметром HttpOnly, установленным в ЛОЖНЫЙ, иначе 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;
}
}
1

По вопросам рекламы ammmcru@yandex.ru
Adblock
detector