在Angular 6中添加Xsrf-Token的问题 [英] Issue in adding Xsrf-Token in an Angular 6
问题描述
通过API提交的表单中的数据发布成功.
Posting data from the form submit via API was successful.
但是在将X-CSRF-TOKEN添加到标题并设置withCredentials: true
之后
结果数据未发布到名为insert.php
But after adding X-CSRF-TOKEN to the header and setting withCredentials: true
resulted data were not posted to the script named insert.php
错误:
无法加载 http://localhost/simple_api/insert.php : 预检请求未通过访问控制检查: 响应中的"Access-Control-Allow-Origin"标头不得为 当请求的凭据模式为包括"时,使用通配符"*".起源 因此,不允许访问 http://localhost:4200 .这 XMLHttpRequest发起的请求的凭据模式为 由withCredentials属性控制.
Failed to load http://localhost/simple_api/insert.php: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. Origin 'http://localhost:4200' is therefore not allowed access. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.
删除withCredentials: true
结果数据已成功发布.
但看不到X-CSRF-TOKEN
Removing withCredentials: true
resulted data were successfully posted.
But unable to see the 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值?
Consoling the values of the header, Xsrf-Token was not set. How am I supposed to set the Xsrf-Token values?
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代码中
Add the following header to your php code
header("Access-Control-Allow-Credentials: true");
此外,为什么还要混合使用旧的HttpModule
和新的HttpClient
模块? RequestOptions
和Headers
在角度6中已弃用
Also, why are you mixing old HttpModule
and new HttpClient
module? RequestOptions
and Headers
are deprecated in angular 6
如果使用HttpClient
,则默认情况下内容类型已设置为json,而withCredentials
已由HttpClientXsrfModule
设置.
If you use HttpClient
, content type is already set to json by default, and withCredentials
is set by the HttpClientXsrfModule
.
您的请求可以简化为
return this._http.post("http://localhost/simple_api/insert.php",info);
修改
HttpClientXsrfModule
在后台创建的默认拦截器似乎无法处理绝对URL ....
Edit
The default interceptor created behind the scene by HttpClientXsrfModule
does not seem to handle absolute urls....
https://github.com/angular/angular/issues/18859
这篇关于在Angular 6中添加Xsrf-Token的问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!