Laravel Passport 和 Vue 伴随 Guzzle 不返回令牌

Question

我正在使用 Laravel Passport 来处理我的 oauth2 登录实现。关注来自 Dre Himself 的视频。在本地主机上一切正常，但在登录真实站点时出现问题，现在我想将我的应用程序部署到 DigitalOcean，并在设置 nginx、.env 文件、作曲家、npm、设置护照后（php artisan passport:install) 和数据库使用 (php artisan 迁移)。在我的登录返回 200 并响应负载为

之前，一切似乎都正常

<!DOCTYPE html>\n<html lang=\"en\">\n    <head>\n        <meta charset=\"utf-8\">\n        <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n\n        <title>Resume Workshop</title>\n\n        <!-- Fonts -->\n        <link href=\"https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700;900&display=swap\" rel=\"stylesheet\">  \n        <link rel=\"stylesheet\" href=\"https://myresumeworkshop.com/css/app.css\">\n    </head>\n    <body>\n        <main id=\"app\"></main>\n        <script src=\"https://myresumeworkshop.com/js/app.js\"></script>\n    </body>\n</html>\n

不记名访问令牌而不是正确的响应。有趣的是，当我使用 insomnia 向 /oauth/token 端点发出 post 请求时，它 returns 令牌，我可以手动将令牌插入我的本地存储，应用程序将正常运行.

这是我在后端的登录代码：

public function login(Request $request) {
        $http = new \GuzzleHttp\Client;

        try {
            $response = $http->post(config('services.passport.login_endpoint'), [
                'form_params' => [
                    'grant_type' => 'password',
                    'client_id' => config('services.passport.client_id'),
                    'client_secret' => config('services.passport.client_secret'),
                    'username' => $request->username,
                    'password' => $request->password,
                ]
            ]);
            
            // return json_decode((string) $response->getBody(), true)
            return $response->getBody();
        }
        catch (\GuzzleHttp\Exception\BadResponseException $e) {
            if ($e->getCode() === 400) {
                return response()->json('Incorrect username or password', $e->getCode());
            } else if ($e->getCode() === 401) {
                return response()->json('Your credentials are incorrect. Please try again', $e->getCode());
            }

            return response()->json('Something went wrong on the server.', $e->getCode());
        }
    }

和我在前端的代码：

retrieveToken(context, data) {
        return new Promise((resolve, reject) => {
            axios
                .post("/login", {
                    username: data.username,
                    password: data.password
                })
                .then(response => {
                    const token = response.data.access_token;
                    localStorage.setItem("access_token", token);

                    context.commit('retrieveToken', token);
                    resolve(response);
                }).catch(error => {
                    // console.log(error)
                    reject(error)
                });
        })
    }

当我 console.log response.data 时，它将输出 !doctype html 如上所述。我怀疑这可能是由于 Guzzle 客户端 header content-type: text/html 而不是 application/json。也可能是我的 nginx 配置问题。

这是来自 guzzle post 请求

的 $response 的 die 和转储

GuzzleHttp\Psr7\Response {#334
  -reasonPhrase: "OK"
  -statusCode: 200
  -headers: array:6 [
    "Server" => array:1 [
      0 => "nginx/1.14.0 (Ubuntu)"
    ]
    "Content-Type" => array:1 [
      0 => "text/html; charset=UTF-8"
    ]
    "Connection" => array:1 [
      0 => "close"
    ]
    "Cache-Control" => array:1 [
      0 => "no-cache, private"
    ]
    "Date" => array:1 [
      0 => "Sat, 01 Aug 2020 22:45:37 GMT"
    ]
    "Set-Cookie" => array:3 [
      0 => "XSRF-TOKEN=eyJpdiI6IlNlWWU4NzA2Q0ZLcFdQeWR0dHlra2c9PSIsInZhbHVlIjoiNTZWSlRmUk80UzViV2FXSVFPRGlmTHdGXC9kVmNxRG1oRHNwcllyNHhqOXNOZk0zTloxYlZ3bkwrbG03eTF1SkUiLCJtYWMiOiIyOTIyZWY5ODMyNTNiMDc5Y2JiOTI4ZDEwYjM0YTczYzcxNzgyZWJiYTA1NjM2YzM3MTBhN2U1MTEwZWE5ZjM5In0%3D; expires=Sun, 02-Aug-2020 00:45:37 GMT; Max-Age=7200; path=/"
      1 => "resume_workshop_session=eyJpdiI6InlkWTlHWnBqVXZnOFwvRndUOGduQWV3PT0iLCJ2YWx1ZSI6IlRpaXlaTmJzZUl2MlVvRlBFakhVK0FIeDV3K0xXMnlVWmpVUTNjWDBHbFJ1UkNVbWZQSTVxcXg3RHNvZUF0NXYiLCJtYWMiOiJlNTI2YjQyNjRjMGZhODNhNjhkNjdhOWQ1MzQ5YWY2MmNlZTAwODk3M2NiYmI5YTJiNDQxMDUxNWQ3NzNiZmY3In0%3D; expires=Sun, 02-Aug-2020 00:45:37 GMT; Max-Age=7200; path=/; httponly"
      2 => "LfsxdWN0U7YDplqYkRiAHeaRYayLUBKvUToCvfV3=eyJpdiI6IkdEU1NVVnk5VE9ESzNvNjNGTTYwdUE9PSIsInZhbHVlIjoidEZ3WjR5dDdSR0Zya1Z5UkpnVk5JU3FVWWJCczhXOHkxd0dud0FpVDhkK29cL2NKemNZNTAwS1N6alpxSm0yNU13bGRFREhRS3BnSWd6RDZFc05MNXJsN3FFWktNTjBzcjkyVHVHS1hNN0NuZEZvZFZVak85SUQrRWRPaFRQK3BtYTc1YU4wOHlVbmlkdnNrWGVYcUhQcmRPbjExXC8rUldyTFwvMFwvVUltaGk3QzZcL1d0RVA1SVFIbzgxVmZVSjE5SnFJazZqd1d4Z000QjB4MWxLVThJd1FYQjN2QTlCeGp3WjZIRlpFd0VHU3ZcL3p3N2lsRXdOOGhuXC9iUWJMd3Nmb0FwaENIOW1qTVU5dWJWZkVTXC9oeXoxRUpTODRxT3hmcExoWW85cG9DOGFGaDNyUmxRdDJGYlpBbkNpZXNSbGNIYlNZbTN4REhjREkrV0doK0c5Vk1kWW82RERCN1NDRlhWcFBLVU5tWDdXdGM9IiwibWFjIjoiMmRhYzlhZGVhZWIwMGVmZDdiYTJiNWUwYTAwNDQ0MTgxMTY1ZDY2MmU5MWE0MWE5ODA5ZGJlNWIyYjE2NzY5MSJ9; expires=Sun, 02-Aug-2020 00:45:37 GMT; Max-Age=7200; path=/; httponly"
    ]
  ]
  -headerNames: array:6 [
    "server" => "Server"
    "content-type" => "Content-Type"
    "connection" => "Connection"
    "cache-control" => "Cache-Control"
    "date" => "Date"
    "set-cookie" => "Set-Cookie"
  ]
  -protocol: "1.1"
  -stream: GuzzleHttp\Psr7\Stream {#333
    -stream: stream resource @26
      wrapper_type: "PHP"
      stream_type: "TEMP"
      mode: "w+b"
      unread_bytes: 0
      seekable: true
      uri: "php://temp"
      options: []
    }
    -size: null
    -seekable: true
    -readable: true
    -writable: true
    -uri: "php://temp"
    -customMetadata: []
  }
}

Answer 1

这个问题比我想象的要简单。令牌 returns null 因为我指向的对象不存在。这是因为我没有达到正确的终点。

在我的 .env 文件中，我将 PASSPORT_LOGIN_ENDPOINT 从整个 url http://myweb.com/oauth/token 减少到 /oauth/token.

这在开发过程中不是问题。仅在生产期间，当您已经拥有真实域而不是 localhost 时，它才会出现。

Laravel Passport 和 Vue 伴随 Guzzle 不返回令牌

Laravel Passport and Vue accompanied by Guzzle not returning token

nginx

oauth-2.0

laravel

guzzle

vue.js