首页 > 解决方案 > 带有 chrome 的 cors 插件的 Ajax 请求

问题描述

我正在尝试向用户/登录发出 cors ajax 请求以验证用户并发回 JWT 令牌。options 请求返回 200,而 post 请求返回 403 禁止并出现“缺少 CSRF 令牌 cookie”错误。我正在使用 chrome 的 cors 插件。在我的 UsersController.php 里面它的初始化函数我有 $this->Auth->allow(['login']);

localhost:8765 上的 cakephp 服务器,带有“cake server”,extjs 服务器在http://localhost:1841/上启动,带有“sencha app watch”

登录控制器.js

onLoginClick: function() {
        this.getView().mask('Effettuando il login..');
        var data = this.getView().down('form').getValues();
        App.security.Firewall.login(data.username, data.password).then(function() {
            this.getView().destroy();

            Ext.create({
                xtype: 'app-main'
            });
            this.getView().unmask();
        }.bind(this), function(data) {
            Ext.Msg.alert('Errore', data.message || 'Impossibile eseguire il login in questo momento.');
        });
    }

防火墙.js

 login: function(username, password) {
        var deferred = new Ext.Deferred();
        Ext.Ajax.request({
            url: 'http://localhost:8765/users/login',
            method: 'POST',
            params: {
                'username': username,
                'password': password
            },
            success: function (response) {
                var data = Ext.decode(response.responseText);
                if (data.token) {
                    App.security.TokenStorage.save(data.token);

                    deferred.resolve(data, response);
                } else {
                    deferred.reject(data, response);
                }
            },

            failure: function (response) {
                var data = Ext.decode(response.responseText);

                App.security.TokenStorage.clear();

                deferred.reject(data, response);
            }
        });

        return deferred.promise;
    },

这就是我加载 JWT Auth 插件的方式

 $this->loadComponent('Auth', [
            'storage' => 'Memory',
            'authenticate' => [
                'ADmad/JwtAuth.Jwt' => [
                    'userModel' => 'Users',
                    'fields' => [
                        'username' => 'id'
                    ],

                    'parameter' => 'token',

                    // Boolean indicating whether the "sub" claim of JWT payload
                    // should be used to query the Users model and get user info.
                    // If set to `false` JWT's payload is directly returned.
                    'queryDatasource' => true,
                ]
            ],

            'unauthorizedRedirect' => false,
            'checkAuthIn' => 'Controller.initialize',

            // If you don't have a login action in your application set
            // 'loginAction' to false to prevent getting a MissingRouteException.
            'loginAction' => [
              'controller' => 'Users',
              'action' => 'login',
          ],
        ]);

最后这是用户路线

Router::scope('/users', function ($routes) {
    $routes->setExtensions(['json']);
    $routes->resources('Users');    
}); 

“选项”网络选项卡:

一般的

Request URL: http://localhost:8765/users/login
Request Method: OPTIONS
Status Code: 200 OK
Remote Address: [::1]:8765
Referrer Policy: no-referrer-when-downgrade

响应头

Access-Control-Allow-Headers: x-requested-with
Access-Control-Allow-Methods: POST, GET, OPTIONS, PUT, DELETE
Access-Control-Allow-Origin: *
Allow: POST, GET, OPTIONS, PUT, DELETE
Connection: close
Content-type: text/html; charset=UTF-8
Date: Wed, 03 Jul 2019 14:44:03 +0000
Host: localhost:8765
X-Powered-By: PHP/7.1.26

请求标头

Provisional headers are shown
Access-Control-Request-Headers: x-requested-with
Access-Control-Request-Method: POST
Origin: http://localhost:1841
Referer: http://localhost:1841/
User-Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.100 Safari/537.36

“发布”网络标签:

一般的

Request URL: http://localhost:8765/users/login
Request Method: POST
Status Code: 403 Forbidden
Remote Address: [::1]:8765
Referrer Policy: no-referrer-when-downgrade

响应头

Access-Control-Allow-Headers: x-requested-with
Access-Control-Allow-Methods: POST, GET, OPTIONS, PUT, DELETE
Access-Control-Allow-Origin: *
Allow: POST, GET, OPTIONS, PUT, DELETE
Connection: close
Content-Type: text/html; charset=UTF-8
Date: Wed, 03 Jul 2019 14:44:08 +0000
Host: localhost:8765
X-DEBUGKIT-ID: 6d9d2319-d3a6-4022-a877-fb404d639081
X-Powered-By: PHP/7.1.26

请求标头

Content-Type: application/x-www-form-urlencoded; charset=UTF-8
Origin: http://localhost:1841
Referer: http://localhost:1841/
User-Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.100 Safari/537.36
X-Requested-With: XMLHttpRequest

我只想对尝试登录的用户进行身份验证并将其 JWT 令牌发送回客户端。目前,该请求甚至没有“达到”登录功能。这是我第一次尝试制作登录系统

标签: extjscakephp-3.0

解决方案


推荐阅读