React Native+Express集成Google授权时重定向CORS错误解决方法

问题根源 #

你用Axios发起的是AJAX请求，后端重定向到Google后，浏览器/React Native的网络层会自动跟进这个重定向请求，但Google的响应里没有Access-Control-Allow-Origin: http://localhost:8080这类头，触发了浏览器的跨域安全拦截——这和你后端的CORS配置无关，因为问题出在Google返回的响应上，你没法修改Google的CORS设置。

正确实现方式 #

方案1：后端返回授权URL，前端主动跳转

后端接口不做重定向，直接返回生成好的Google OAuth授权链接，前端收到后用原生跳转方式打开，避开AJAX的CORS限制。

后端（Express）代码示例：

const express = require('express');
const app = express();

app.get('/getGoogleOAuthURL', (req, res) => {
  // 替换成你的实际配置
  const clientId = '你的Google客户端ID';
  const redirectUri = '你的授权回调地址（需在Google控制台配置）';
  const scope = 'email profile';
  
  const googleAuthUrl = `https://accounts.google.com/o/oauth2/v2/auth?client_id=${clientId}&redirect_uri=${redirectUri}&response_type=code&scope=${encodeURIComponent(scope)}`;
  
  // 返回URL而非重定向
  res.json({ authUrl: googleAuthUrl });
});

app.listen(8000);

前端（React Native）代码示例：

import axios from 'axios';
import { Linking } from 'react-native';

const triggerGoogleAuth = async () => {
  try {
    const res = await axios.get('http://192.168.4.118:8000/getGoogleOAuthURL');
    // 用React Native的Linking打开授权页面
    await Linking.openURL(res.data.authUrl);
  } catch (err) {
    console.error('获取授权URL失败:', err);
  }
};

方案2：前端直接访问后端接口（不用AJAX）

如果非要后端触发重定向，前端不要用Axios发AJAX请求，直接通过原生跳转方式打开后端接口地址，这样会跳过AJAX的CORS检查：

// React Native中直接打开后端接口
Linking.openURL('http://192.168.4.118:8000/getGoogleOAuthURL');

关键提醒 #

Google OAuth的标准流程就是前端直接跳转到Google授权页，授权完成后Google会回调你配置的redirect_uri（可以是后端接口），后端再处理code换取token的逻辑。不要用AJAX请求后端再重定向，这本身就不符合OAuth的设计逻辑，还会触发跨域问题。

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