与Google Oauth封锁了React和DeNo的跨原生蛋白请求

Question

我使用oak有一台deno服务器：

import { CORS } from "https://deno.land/x/[email protected]/mod.ts";
export { Application } from "https://deno.land/x/[email protected]/mod.ts";


const app = new Application();

app.use(CORS({
    origin: '*', credentials: true
}))

app.use('/auth/google/url', (ctx) => {
 const oauth2Client = new OAuth2Client({
      clientId: env.get("CLIENTID") as string,
      clientSecret: env.get("CLIENTSECRET") as string,
      redirectUri: env.get("REDIRECTURI") as string,
      authorizationEndpointUri: env.get("AUTHORIZATIONENDPOINTURI") as string,
      tokenUri: env.get("TOKENURI") as string,
      defaults: {
        scope: "profile email openid",
      },
    });
  ctx.response.redirect(
      return oauth2Client.code.getAuthorizationUri();
    );
});

React App中的API

import React from 'react'

export default function App(){
  const handleClick = () => {
     fetch('/auth/google/url', {method: 'get', redirect: 'follow'})
    .then((response) => {
      if (response.status === 302) {
        window.location.href = response.url
      }
    })

  }

  return(
    <Button onClick={handleClick}>SignIn with Google</Button>
  )

}

我在package.json中设置了

"proxy": "http://127.0.0.1:5000"

：我在浏览器控制台中遇到了此错误：

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://accounts.google.com/o/oauth2/v2/auth?response_type=code&client_id=XXXXXXXXXXX&redirect_uri=http%3A%2F%2Flocalhost%3A5000%2Fauth%2Fgoogle%2Fcallback&scope=profile+email+openid. (Reason: CORS request did not succeed). Status code: (null).

Answer 1

我通过更新API解决了问题，因此，我没有将用户重定向到回调页面，而是返回URL和状态代码：

app.use('/auth/google/url', (ctx) => {
 const oauth2Client = new OAuth2Client({
      clientId: env.get("CLIENTID") as string,
      clientSecret: env.get("CLIENTSECRET") as string,
      redirectUri: env.get("REDIRECTURI") as string,
      authorizationEndpointUri: env.get("AUTHORIZATIONENDPOINTURI") as string,
      tokenUri: env.get("TOKENURI") as string,
      defaults: {
        scope: "profile email openid",
      },
    });

      ctx.response.body = oauth2Client.code.getAuthorizationUri();
      ctx.response.status = 302
});

因此，按钮处理程序会像这样更新：

const handleClick = async () => {
   const response =  await fetch('http://localhost:3000/auth/google/url')
   const data = await response.json()
   if (data) {
     window.location.href = data
   }
  }