在邮递员中获取请求工作但在浏览器中不起作用答案

【问题标题】：Get Request work in postman but doesn't work in browser在邮递员中获取请求工作但在浏览器中不起作用
【发布时间】：2019-10-02 13:39:18
【问题描述】：

我的 Web 应用程序在客户端使用 Angular7，在 Api 中使用 CakePHP 我正在使用Basic Authentication 然后我用Token Authentication 替换它所有请求都可以正常工作，除了一个只能在Postman 中正常工作的请求，但在浏览器中这很奇怪，因为似乎身份验证存在问题但不知道原因.

请求应该返回一个blob来下载文件，所以我在CakePHP中使用FPDI来返回pdf

这是邮递员的请求

邮递员标题

Date →Wed, 15 May 2019 12:02:44 GMT
Server →Apache/2.4.33 (Win32) OpenSSL/1.0.2n PHP/5.6.35
X-Powered-By →PHP/5.6.35
Content-Disposition →inline; filename="doc.pdf"
Cache-Control →private, max-age=0, must-revalidate
Pragma →public
Access-Control-Allow-Origin →*
Keep-Alive →timeout=5, max=100
Connection →Keep-Alive
Transfer-Encoding →chunked
Content-Type →application/pdf

邮递员身体 Chrome 上的请求 使用基本身份验证的工作请求 使用 FireFox

来电请求

    getWorkListPdf(id: number, cem_id?: number) {
    let uri = `${this.workSessionsUrl}workList/${id}`;
    let params = new HttpParams();
    if (cem_id) {
      params = params.set('cemetery_id', cem_id.toString());
    }
    const Auth = localStorage.getItem("AuthenticationToken");
    let header = new HttpHeaders();
      header = header.append("AuthenticationToken", Auth);
    return this.dataService.get(uri,{ headers: header, params: params, responseType: 'arraybuffer'  })
    .pipe(
      map(res => {
                  return res;
                }
      )
    );
  }

非常感谢任何帮助！

【问题讨论】：

请不要发布文字图片。复制文本并将其作为引用或代码粘贴到此处（任何适合文本的内容）。
@nkr 我更新了帖子，但实际上我不能用代码/文本替换所有图像！它不会有清晰的视野
请不要重复您自己的问题，而是更新原始问题！话虽如此，请检查为什么 chrome 说 "Provisional headers are shown"，这可能与问题有关。
@ndm 当我发布那个问题时，我无法指定问题，如果它来自Angular 或Api，但是这个问题有明确的信息，我删除了前一个
@ndm 感谢您的建议，我正在查看Provisional headers

标签： php angular authentication cakephp postman

【解决方案1】：

问题是Api 无法识别包含身份验证所需标头信息的请求，我在AppController 中添加了Authentication 数组以允许在接收@ 时同时使用Basic Auth 和Token Auth 987654326@ 请求，这项工作适用于除此之外的所有请求（下载 pdf）我已经尝试添加

$this->Auth->authenticate['Token'] = array(
                'fields' => array(
                ),
                // 'parameter' => '_token',
                'header' => 'AuthenticationToken',
                'scope' => array(
                    'User.permission_api_login' => true
                )
        );

再次在控制器中，它工作正常！！。看来现在可以识别Token并返回有效文件了！

【讨论】：

【解决方案2】：

如果我完全理解您想使用不记名令牌而不是基本授权进行身份验证。如果您想要基本的，您可以在您的请求中使用以下标头：

const httpOptions = {
    headers: new HttpHeaders({ 
        'Content-Type': 'application/json',
        'Authorization': 'Basic ' + btoa('username:password')
    })
};

在承载授权的情况下，您可以执行以下操作：

const httpOptions = {
    headers: new HttpHeaders({ 
        'Content-Type': 'application/json',
        'Authorization': 'Bearer ' + JSON.parse(your token)
    })
};

希望对你有帮助！

【讨论】：

我在应用身份验证时没有问题，但似乎此请求的令牌身份验证存在问题，请查看 chrome 请求，为什么 @987654324 中没有 AuthenticationToken @

【解决方案3】：

在您的请求中添加 withCredentials true。

const httpOptions = {
    headers: new HttpHeaders({
        'Accept': "application/json",
        'Content-Type': "text/plain;charset=UTF-8",
        'Authorization': 'Bearer ' + JSON.parse(your token)
    }), withCredentials: true
};

【讨论】：

感谢您的回答！但是当使用withCredentials: true时，它只发送Options请求，之后不发送Get Request！
为了通过使用 Angular 和 php 发送 Cookie，我们需要添加 withCredentials:true。您还必须在 Serverside 中进行相同的更改。我对 cakephp 不太了解，但你可以这样做：private function setCorsHeaders() { $this->response->cors($this->request) ->allowOrigin(['*']) ->allowMethods(['*']) ->allowHeaders(['x-xsrf-token', 'Origin', 'Content-Type', 'X-Auth-Token']) ->allowCredentials(['true']) ->exposeHeaders(['Link']) ->maxAge(300) ->build(); }