Question

此HTML表单会发送请求，Google身份验证可以正常运行：

<form action="/auth/google" method="get">
    <button type="submit">
        Login with google
    </button>
</form>

然而，响应的内容（JSON）在浏览器中显示，如HTML页面，并且由于某种原因替换当前页面。如果我阻止表单提交（即e.preventDefault()），则根本不会发生任何事情。我不知道如何抓住JSON。

所以我正在尝试使用Ajax进行相同的调用

<button type="submit" id="btnGoogle">
    Login with google
</button>

<script>

    $('#btnGoogle').click( (e) => {

        $.ajax({
                type: "GET",
                url :"/auth/google",
                dataType : "json",
                crossDomain : true, // no effect
                headers : {
                    // Tried many headers, no effect
                }
            })
            .success( (data) => {
                console.log("Success!", data))
            })
            .error( (err) => {
                console.error(err.statusText);
            })
        });

    </script>

但是我遇到了跨域错误

XMLHttpRequest无法加载 https://accounts.google.com/o/oauth2/v2/auth?response_type=code&redirect_ur ... d = 178168129307-5g50gah2he0gjjl2or73a1va8ha66s24.apps.googleusercontent.com。请求中不存在“Access-Control-Allow-Origin”标头资源。因此不允许来源“http://localhost:8100” 访问。

在Node / Express服务器上：

app.get('/auth/google',
    passport.authenticate('google', {
        scope: ['https://www.googleapis.com/auth/plus.profile.emails.read']
    }));

为什么到达具有相同参数的完全相同的服务器路由的HTML表单是如此，但Ajax调用不会？

修改

我通过安装CORS extension for Chrome找到了一个解决方法，所以...是的，它有点有用，但是为什么Ajax调用需要这个，而常规的HTML表单却没有？

Answer 1

re：为什么Ajax调用需要这个，而普通的HTML表单不会＆＃34;

您的基本ajax来电根本无法处理服务器重定向，因此无法处理来自Google的OAuth系统的重定向。

为了避免所有OAuth提供程序出现问题，我必须确保Ajax不处理登录链接并允许浏览器处理任何重定向。

如果您希望它显示为SPA，则使用iframe来处理外部登录和后续重定向将是另一种选择。

纯HTML表单工作，与Ajax相同的查询失败

1 个答案: