인프런 커뮤니티 질문&답변

vue3에서 quasar 프레임워크 사용중인데 구글 로그인을 하고 나면 콘솔에

POST http://localhost:9000/token net::ERR_ABORTED 404 (Not Found)

이런 오류가 뜨는데 해결 가능할까요?

<template>
  <div>
    <button @click="redirectToGoogle">Login with Google</button>
  </div>
</template>

<script>
export default {
  methods: {
    redirectToGoogle() {
      const clientId =
        '952226683996-giormhm5n1ch6vig4n2h0ng5vc9t0p0h.apps.googleusercontent.com';
      const redirectUri = 'http://localhost:9000/';
      const scope = 'https://www.googleapis.com/auth/userinfo.profile';
      const responseType = 'code';
      const url = `https://accounts.google.com/o/oauth2/v2/auth?client_id=${clientId}&redirect_uri=${redirectUri}&scope=${scope}&response_type=${responseType}`;
      window.location.href = url;
    },

    async exchangeCodeForToken(code) {
      try {
        const response = await fetch('http://localhost:9000/token', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({ code }),
        });

        if (!response.ok) {
          throw new Error('Network response was not ok');
        }

        const data = await response.json();
        console.log(data);
      } catch (error) {
        console.error('Error:', error);
      }
    },

    created() {
      window.addEventListener('message', event => {
        if (event.data && event.data.code) {
          this.exchangeCodeForToken(event.data.code);
        }
      });
    },
  },
};
</script>

<script>
export default {
  methods: {
    redirectToGoogle() {
      const clientId =
        '952226683996-giormhm5n1ch6vig4n2h0ng5vc9t0p0h.apps.googleusercontent.com';
      const redirectUri = 'http://localhost:9000/';
      const scope = 'https://www.googleapis.com/auth/userinfo.profile';
      const responseType = 'code';
      const url = `https://accounts.google.com/o/oauth2/v2/auth?client_id=${clientId}&redirect_uri=${redirectUri}&scope=${scope}&response_type=${responseType}`;
      window.location.href = url;
    },

    async exchangeCodeForToken(code) {
      try {
        const response = await fetch('http://localhost:9000/token', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({ code }),
        });

        if (!response.ok) {
          throw new Error('Network response was not ok');
        }

        const data = await response.json();
        console.log(data);
      } catch (error) {
        console.error('Error:', error);
      }
    },
  },

  created() {
    const urlParams = new URLSearchParams(window.location.search);
    const code = urlParams.get('code');
    if (code) {
      this.exchangeCodeForToken(code);
    }
  },
};
</script>

const express = require('express');
const fetch = require('node-fetch');
const bodyParser = require('body-parser');
const cors = require('cors');

const app = express();
const PORT = 9000;

app.use(cors());
app.use(bodyParser.json());

app.post('/token', async (req, res) => {
  const code = req.body.code;
  const clientId =
    '952226683996-giormhm5n1ch6vig4n2h0ng5vc9t0p0h.apps.googleusercontent.com';
  const clientSecret = 'secret';
  const redirectUri = 'http://localhost:9000/';
  const tokenEndpoint = 'https://oauth2.googleapis.com/token';

  const params = new URLSearchParams();
  params.append('code', code);
  params.append('client_id', clientId);
  params.append('client_secret', clientSecret);
  params.append('redirect_uri', redirectUri);
  params.append('grant_type', 'authorization_code');

  try {
    const response = await fetch(tokenEndpoint, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
      },
      body: params,
    });

    if (!response.ok) {
      throw new Error('Failed to fetch token');
    }

    const data = await response.json();
    res.json(data);
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
});

app.listen(PORT, () => {
  console.log(`Server is running on http://localhost:${PORT}`);
});