带有 x-www-form-urlencoded 数据的 Angular 6 http 发布请求

Posted 2023-02-27

【中文标题】带有 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)
             );