Публикация данных из формы отправки через 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'
})
],
...
Добавьте следующий заголовок к вашему 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 ….
Серверный, 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;
}
}