在 Post 方法上获取 401 Unauthorized [前端 - Angular 2 和后端 - Cakephp 3]

Posted

技术标签:

【中文标题】在 Post 方法上获取 401 Unauthorized [前端 - Angular 2 和后端 - Cakephp 3]【英文标题】:Getting 401 Unauthorized on Post method [ Front end - Angular 2 & Back end - Cakephp 3] 【发布时间】:2017-04-11 22:12:30 【问题描述】:

我在 Cakephp 3 中将 Angular 2 用于前端和后端。我在尝试登录时收到 401 Unauthorized 状态。我已经在 cakephp 3 中配置了 JWT,它在 POSTMAN 中运行良好。但不适用于 Angular。

这是我的 TypeScript 代码

loginToken(uname: string, pwd: string): Observable<boolean>
  let json = JSON.stringify( username: uname , password: pwd);
  let headers = new Headers();
  headers.append('Content-Type', 'application/json');
  headers.append('Accept', 'application/json');
  let options = new RequestOptions( headers: headers );

  return this.http.post('http://localhost/crm/crm/api/users/token', json, options)
    .map((response: Response) => 
      let token = response.json() && response.json().token;
      if (token) 
        this.token = token;
        localStorage.setItem('currentUser', JSON.stringify( username: uname, token: token ));
        return true;
       else 
        return false;
      
    );

Cakephp 3 代码 - 服务器端

public function token()
       
        $user = $this->Auth->identify();
        if (!$user) 
            throw new UnauthorizedException('Invalid username or password');
        

        $this->set([
            'success' => true,
            'data' => [
                'token' => JWT::encode([
                    'sub' => $user['id'],
                    'exp' =>  time() + 604800
                ],
                Security::salt())
            ],
            '_serialize' => ['success', 'data']
        ]);

    

这里有一些截图

请帮我解决这个问题。

删除选项后 -

loginToken(uname: string, pwd: string): Observable<boolean>
  let json = JSON.stringify( username: uname , password: pwd);
  let headers = new Headers();
  headers.append('Content-Type', 'application/x-www-form-urlencoded');
  let options = new RequestOptions( headers: headers );

  return this.http.post('http://localhost/crm/crm/api/users/token', json, headers: headers )
    .map((response: Response) => 
      let token = response.json() && response.json().token;
      if (token) 
        this.token = token;
        localStorage.setItem('currentUser', JSON.stringify( username: uname, token: token ));
        return true;
       else 
        return false;
      
    );

我得到了回应

【问题讨论】:

看起来像是一个 CORS 问题,您需要在服务器上配置一些东西,或者标题中的一些东西不太正确。 developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS 是的,我确实有同样的感觉,但没有得到解决方案,有什么建议吗? @NeerajRathod,你修好了它并且工作正常吗?我正在解决同样的问题。我正在尝试使用 cakephp 3.4.0 和 Angular 2 创建登录和注册功能。你能帮帮我吗? 【参考方案1】:

您的问题是缺少或错误的内容类型标题。

对于登录不发送 OPTIONS 请求,您的内容类型应该是标准表单类型之一: application/x-www-form-urlencoded 或 multipart/form-data

我认为 text/pain 也可能有用,但我自己没有使用。

编辑:实际上有一个关于它的 SO:How to disable OPTIONS request?

【讨论】:

嗨 Vladimir M,我尝试过使用“Content-type :application/x-www-form-urlencoded”,但它不起作用,还有其他建议吗? 它仍然发送选项请求吗?如果仍然发送选项,您可能还想从请求中删除“接受”标头。 不,我已删除选项并使用 'Content-Type'、'application/x-www-form-urlencoded' 传递标头对象。 您能否使用来自开发工具的响应的最新屏幕截图进行更新。 我已经放了最新的回复截图,请浏览一下并分享一些建议等待

以上是关于在 Post 方法上获取 401 Unauthorized [前端 - Angular 2 和后端 - Cakephp 3]的主要内容,如果未能解决你的问题,请参考以下文章

GitHub GraphQL 不断返回 POST https://api.github.com/graphql 401 错误

tomcat web页面管理应用配置

POST 请求返回 401 Unauthorized(仅在 Chrome 中)

c#Web Api:本地主机上的 HTTP 200 但远程主机上的 400/401 具有相同的用户

使用 EWS API 发送电子邮件方法获取 401 未经授权

调用.Net API时如何解决邮递员中的401未授权错误