HTTP POST 请求 Ionic 3 给出 403 禁止

Posted

技术标签:

【中文标题】HTTP POST 请求 Ionic 3 给出 403 禁止【英文标题】:HTTP POST request Ionic 3 gives 403 forbidden 【发布时间】:2021-09-26 09:04:40 【问题描述】:

我目前正在开发基于 ionic 3.9.2 的应用程序。我正在尝试向 API 发送 POST 请求,但我收到了 403 禁止。最初我遇到了 CORS 问题,但我暂时将 https://cors-anywhere.herokuapp.com/ 添加到 URL 以绕过它。这是函数:

voucher-details.ts:

editVoucher(voucher) 
voucher.Comments = (voucher.Comments || " ");
if (!voucher.Comments.includes('Edited via Guide App')) 
  voucher.Comments += " Edited via Guide App";

//WORKS UP TILL HERE
this.voucherService.editVoucher(voucher)
//      .map((res) => res.json())
  .map((res) => res)
  .subscribe(
    (res) => 
      console.log("old voucher id", voucher.voucher_Id);
      console.log("new voucher id", res);
      this.showSuccess("Voucher updated successfully");
    ,
    (err) => 
      console.log("Error occured while updating voucher id "),
        this.showError("Oops, an error occured. Please try again");
    
  );

它引用voucherService.editVoucher(voucher)的函数在这里:

voucher.ts:

 public editVoucher(voucherToUpdate) 
    //application/x-www-form-urlencoded
    const httpOptions = 
        headers: new HttpHeaders(
          'Content-Type':  'application/json',
         // Authorization: 'my-auth-token'
        )
      ;
    return this.HttpClient.post(`https://cors-anywhere.herokuapp.com/$API_BASE_URL/Api/GuideApp/UpdateVoucher`, 

        Voucher: voucherToUpdate,
        tenantId: voucherToUpdate.tenantId
        
    , httpOptions);
    

【问题讨论】:

【参考方案1】:

让我们承认您的代码没有问题,并且您根据服务器的需要传递了您的身份验证凭据。 cors-anywhere有一些限制as mentioned here:

从 2 月 1 日开始。 2021 年,cors-anywhere.herokuapp.com 将只服务 访问者完成挑战后的请求:用户 (开发人员)必须访问 cors-anywhere.herokuapp.com 上的页面以 暂时为他们的浏览器解锁演示。这允许开发人员 试用功能,帮助决定自托管或 寻找替代品。

尝试在浏览器上手动解锁:https://cors-anywhere.herokuapp.com/corsdemo

【讨论】:

以上是关于HTTP POST 请求 Ionic 3 给出 403 禁止的主要内容,如果未能解决你的问题,请参考以下文章

Ionic 2 / Angular 问题与 http post 到 laravel api

提高查询速度Ionic / Laravel Post请求

在 Ionic 4 应用程序中无法绕过 CORS

POST 请求在 IONIC 应用程序中的 iOS 设备上不起作用

ionic使用常见问题——PHP无法获取$http的post数据

ionic调用数据接口(post解决 payload 问题)