使用 Google 登录 AWS Cognito Hosted UI 期间出现 CORS 问题

Question

所以我在 AWS Cognito 上设置了通过 Google 登录。对于应用程序客户端，我正在使用代码授权。但问题是当我将生成的代码从 ?code=1234abdce#$% 传递到 url 时，格式如下：

let root_url = `https://<our_apps_domain>.auth.us-east-1.amazoncognito.com/oauth2/token`
let content_type = "Content-Type='application/x-www-form-urlencoded'&"
let grand_type ='grant_type=authorization_code&'
let client_id='client_id='+process.env.GOOGLE_APP_CLIENT_ID+'&'
let code_grant='code='+code+"&"
let redirect_uri='redirect_uri='+process.env.FRONTEND_URL+'/home'
let code_grant_url=root_url+content_type+grand_type+client_id+code_grant+redirect_uri

fetch(code_grant_url,{
        method:'POST',
        headers:{
            'Access-Control-Allow-Origin':process.env.FRONTEND_URL
        }
    }).then((res) =>
    !res.ok ? res.json().then((e) => Promise.reject(e)) : res.json()
  )

我收到 CORS 错误：来源 'http://localhost:3000' 已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：否 'Access-Control-Allow-Origin' header 出现在请求的资源上。如果不透明的响应满足您的需求，请将请求的模式设置为 'no-cors' 以在禁用 CORS 的情况下获取资源。这里有什么问题？

Answer 1

您必须将 Content-Type header 设置为 application/x-www-form-urlencoded，详见 here。

它不是查询字符串参数。事实上，none 的参数是要在查询字符串中传递的。您应该使用 urlencoded body，因此只需获取您的查询字符串并将其作为请求 body 传递即可。或者更好的是，URLSearchParams 构造函数来改进您的代码。

fetch('https://<our_apps_domain>.auth.us-east-1.amazoncognito.com/oauth2/token',{
    method:'POST',
    headers:{
        'Content-Type': 'application/x-www-form-urlencoded'
    },
    body: new URLSearchParams({
        grant_type: 'authorization_code',
        client_id: process.env.COGNITO_CLIENT_ID,
        redirect_uri: `${process.env.FRONTEND_URL}/home`,
        code,
        code_verifier
    })
})

此外，由于您使用的是 public 客户端（浏览器），因此您必须使用 PKCE 的授权码授予。

使用 Google 登录 AWS Cognito Hosted UI 期间出现 CORS 问题

CORS issue during AWS Cognito Hosted UI sign in using Google

jwt

reactjs

amazon-cognito