带有 x-www-form-urlencoded 数据的 Angular 6 http 发布请求
Posted
技术标签:
【中文标题】带有 x-www-form-urlencoded 数据的 Angular 6 http 发布请求【英文标题】:Angular 6 http post request with x-www-form-urlencoded data 【发布时间】:2022-02-07 02:49:06 【问题描述】:我一直在尝试向我支持的 API 发出发布请求以发布一些数据。我已经使用邮递员尝试了这个 API,它工作正常并且数据被正确返回。但是,当我尝试从我的 ionic-angular 应用程序中执行相同操作时,它根本不起作用。我已经尝试了大多数网络上可用的方法,但无济于事。 我正在使用 Angular v6.0.8 和 Ionic 框架 v4.0.1 构建这个应用程序。 API 需要请求正文中的 application/x-www-form-urlencoded 数据(包括用户名、密码和 grant_type)。我尝试过使用旧的 http 和新的 httpClient 模块,但没有运气。到目前为止,我已经尝试使用 URLSearchParams/JSONObject/HttpParams 来创建请求的正文。对于标头,我使用 HttpHeaders() 将 application/x-www-form-urlencoded 作为 Content-Type 发送。这些方法都不起作用。
有人可以帮我吗?
PFB 迄今为止我尝试过的方法之一。
谢谢, 阿图尔
import Injectable from "@angular/core";
import HttpClient, HttpHeaders from '@angular/common/http';
@Injectable()
export class AuthService
constructor(private http: HttpClient)
signin(username: string, password: string)
const formData = new FormData();
formData.append('username', username);
formData.append('password', password);
formData.append('grant_type', 'password');
this.http.post(apiUrl,formData,
headers: new HttpHeaders(
'Content-Type':'application/x-www-form-urlencoded'
)
)
.subscribe(
(res) =>
console.log(res);
,
err => console.log(err)
);
【问题讨论】:
你能添加一些代码吗? (POST 请求代码) 我添加了一些代码。请查阅。谢谢@anuradha。 你不需要JSON.stringify(formData)
只需将formData
作为http.post
方法的第二个参数传递
@Anuradha:我这样做了,但我得到了这个错误。错误:错误:“unsupported_grant_type”
【参考方案1】:
我试图从端点获取 oauth 令牌,但我可以说很难找到有效的答案。
下面是我如何让它在 Angular 7 中工作,但这也适用于 Angular 6
import HttpClient, HttpHeaders, HttpParams from '@angular/common/http';
login(user: string, password: string)
const params = new HttpParams(
fromObject:
grant_type: 'password',
username: user,
password: password,
scope: 'if no scope just delete this line',
);
const httpOptions =
headers: new HttpHeaders(
'Content-Type': 'application/x-www-form-urlencoded',
'Authorization': 'Basic ' + btoa('yourClientId' + ':' + 'yourClientSecret')
)
;
this.http.post('/oauth', params, httpOptions)
.subscribe(
(res: any) =>
console.log(res);
sessionStorage.setItem('access_token', res.access_token);
sessionStorage.setItem('refresh_token', res.refresh_token);
,
err => console.log(err)
);
如果您遇到 cors 错误,只需设置一个角度代理:
//proxy.conf.json
"/oauth":
"target": "URL TO TOKEN ENDPOINT",
"changeOrigin": true,
"secure": false,
"logLevel": "debug",
"pathRewrite":
"^/oauth": ""
【讨论】:
非常感谢你,你为我节省了很多时间。如果您遇到 CORS 错误,请使用代理配置,它将根据需要工作。 我也想感谢你,因为我厌倦了代理配置中的其他人,但那没有用。我使用了上面的建议,效果很好。【参考方案2】:您不需要JSON.stringify(formData)
,只需将formData
作为http.post
方法的第二个参数传递即可。
创建FormData
的实例。并附加您需要使用formData.append()
发送的值。
还有 httpHeaders
这样的。
const httpOptions =
headers: new HttpHeaders(
'Content-Type': 'application/x-www-form-urlencoded'
);
const formData = new FormData();
formData.append('username', username);
formData.append('password', password);
formData.append('grant_type', 'password');
this.http.post(apiUrl,formData,httpOptions)
.subscribe(
(res) =>
console.log(res);
,
err => console.log(err)
);
【讨论】:
感谢您的回复。如果我这样做,我仍然会得到不受支持的授权类型 error.error : error: "unsupported_grant_type" headers : HttpHeaders normalizedNames: Map(0), lazyUpdate: null, lazyInit: ƒ 我放置了这个...出现错误 - “TypeError: Cannot read property 'append' of undefined”.. 我需要导入一些东西吗? HttpParams 是不可变的,var body = new HttpParams().set('username', username) .set('password', password) .set('grant_type', 'password'); 【参考方案3】:The key "grant_type" may not be taking due to underscore. Try removing underscore.
import Injectable from "@angular/core";
import HttpClient, HttpHeaders from '@angular/common/http';
@Injectable()
export class AuthService
constructor(private http: HttpClient)
signin(username: string, password: string)
const formData =
'username': 'abc',
'password': 'abc@123',
'granttype': 'abc@123'
this.http.post(apiUrl,formData)
.subscribe(
(res) =>
console.log(res);
,
err => console.log(err)
);
【讨论】:
你的意思是去掉下划线并保留grant和type之间的空格? 只是'granttype' 还是一样的结果。不支持的授权类型。【参考方案4】:请试试这个对我有用:
login(user: string, password: string)
const params = new HttpParams(
fromObject:
// grant_type: 'password',
email: user,
password: password,
// scope: 'if no scope just delete this line',
);
const httpOptions =
headers: new HttpHeaders(
'Content-Type': 'application/x-www-form-urlencoded'
// 'Authorization': 'Basic ' + btoa('yourClientId' + ':' + 'yourClientSecret')
)
;
this.http.post(this.apiUrl+"/ecs/JSON/login.php", params, httpOptions)
.subscribe((res: any) =>
console.log(res);
// sessionStorage.setItem('access_token', res.access_token);
// sessionStorage.setItem('refresh_token', res.refresh_token);
,
err => console.log(err)
);
【讨论】:
以上是关于带有 x-www-form-urlencoded 数据的 Angular 6 http 发布请求的主要内容,如果未能解决你的问题,请参考以下文章
带有 Content-Type 的 Http 发布请求:application/x-www-form-urlencoded
带有 x-www-form-urlencoded 数据的 Angular 6 http 发布请求
Swift-4:如何使用带有“Content-Type”的 URLSession 中的参数的 POST 请求获取数据:“application/x-www-form-urlencoded”
尝试使用 json 数据而不是纯文本或 x-www-form-urlencoded 进行 JQuery 发布时出现 CORS 问题