React集成Zoho Meeting API获取AccessToken时遇CORS错误求助

问题根源 #

1. CORS限制：浏览器禁止前端直接请求Zoho的OAuth token接口，因为Zoho服务器未配置允许http://localhost:3000跨域访问。
2. 安全隐患：你把client_secret写在前端代码里，任何人都能通过浏览器控制台获取到，会导致你的Zoho应用权限被恶意盗用。
3. 无效请求头：前端请求里加"Access-Control-Allow-Origin": "*"完全没用，这个头是服务器响应给浏览器的，不是前端请求需要带的。

正确解决方案：通过Django后端中转请求 #

OAuth的token获取流程必须通过后端完成，不能在前端直接调用。步骤如下：

1. 前端（React）修改：请求自己的Django接口

把原本请求Zoho的代码改成请求你的Django后端接口，只传递授权码code：

// React代码
const url = `/api/zoho/get-token?code=${zcode}`;
publicAxios.get(url)
  .then((res) => {
    console.log(res.data); // 这里拿到后端返回的token
  })
  .catch((err) => {
    console.log(err);
  });

2. 后端（Django）添加接口：中转请求Zoho的token接口

首先确保Django安装了requests库：pip install requests，然后写一个视图函数：

# Django views.py
import requests
from django.http import JsonResponse
from django.views.decorators.csrf import csrf_exempt

@csrf_exempt
def zoho_get_token(request):
    if request.method == 'GET':
        code = request.GET.get('code')
        if not code:
            return JsonResponse({'error': 'code参数缺失'}, status=400)
        
        # 配置Zoho参数（这些信息存在后端，绝对不能暴露给前端）
        client_id = '1000.PGPL8RK7R54UR7JSNKTM2ZRETSF4CI'
        client_secret = '你的client_secret'
        redirect_uri = 'http://localhost:3000/app_store/zoho_meet'
        zoho_token_url = 'https://accounts.zoho.com/oauth/v2/token'
        
        # 构造请求参数
        params = {
            'code': code,
            'client_id': client_id,
            'client_secret': client_secret,
            'redirect_uri': redirect_uri,
            'grant_type': 'authorization_code'
        }
        
        # 后端请求Zoho的token接口（服务器间请求不受CORS限制）
        response = requests.get(zoho_token_url, params=params)
        return JsonResponse(response.json(), status=response.status_code)

然后在urls.py里配置路由：

# Django urls.py
from django.urls import path
from . import views

urlpatterns = [
    path('api/zoho/get-token', views.zoho_get_token, name='zoho-get-token'),
]

3. 配置Django允许前端跨域

安装django-cors-headers库：pip install django-cors-headers，然后修改settings.py：

# settings.py
INSTALLED_APPS = [
    # ... 其他应用
    'corsheaders',
]

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware', # 放在最前面
    'django.middleware.common.CommonMiddleware',
    # ... 其他中间件
]

# 允许前端域名访问
CORS_ALLOWED_ORIGINS = [
    "http://localhost:3000",
]

额外注意事项 #

• 永远不要在前端代码里存放client_secret、API密钥等敏感信息，必须放在后端。
• 生产环境中，要把redirect_uri改成你的正式域名，同时更新Zoho开发者后台的授权回调地址。

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