Google OAuth2配置遇跨域问题：Origin null触发Access-Control报错求助

问题根源 #

你当前用Fetch（AJAX请求）调用后端/login接口并尝试跟随重定向的方式本身就不符合浏览器跨域安全规则。AJAX请求无法跨域跟随到第三方（Google）的授权页面，此时浏览器会将请求Origin设为null，而Google服务器不允许Origin为null的请求，因此触发报错。手动设置Origin头无效，因为浏览器在跨域AJAX场景下会强制控制这个头，不允许自定义。

正确解决方案 #

直接让前端通过浏览器导航的方式访问后端/login接口，而非使用AJAX请求：

1. 修改React前端的登录按钮点击逻辑：

const handleGoogleLogin = () => {
  // 直接跳转到后端的登录接口，由后端处理重定向到Google授权页
  window.location.href = "http://localhost:8080/login";
};

或者用<a>标签直接跳转：

<a href="http://localhost:8080/login" className="login-btn">
  用Google登录
</a>

2. 确保后端Ktor正确配置CORS（允许前端域名的请求）：
   在Ktor的Application模块中添加CORS配置：

install(CORS) {
    allowHost("http://localhost:3000")
    allowCredentials = true
    allowedMethods = HttpMethod.Defaults + HttpMethod.Patch + HttpMethod.Delete
}

补充说明 #

当用户通过浏览器直接导航到后端/login接口时，浏览器会发起普通GET请求，后端返回重定向响应后，浏览器会直接跳转到Google授权页面，整个流程符合浏览器安全规则，不会出现跨域问题或Origin为null的情况。授权完成后，Google会将用户重定向回你配置的后端回调地址，后端处理完认证逻辑后，再重定向回前端页面即可。

内容的提问来源于stack exchange，提问作者user3371750