如何在React.js中从Node.js服务端获取URL并实现正确数据请求

问题根因 #

1. 前端fetch响应处理方法调用错误
   res.send()是Express服务端用于返回响应的API，浏览器fetch API拿到的Response对象不存在该方法，需要根据返回内容类型调用对应解析方法：文本内容用res.text()，JSON内容用res.json()。
2. 跨域请求未授权
   React前端默认运行在http://localhost:3000，Node服务运行在http://localhost:5000，端口不同属于跨域场景，浏览器会默认拦截未配置跨域许可的请求。
3. 接口返回格式不符合前端使用需求
   当前/接口返回的是HTML字符串，若仅需获取OAuth授权URL，直接返回JSON格式数据会更便于前端处理。

你请求/callback无报错的原因，通常是该接口已经配置了跨域响应头。

修复方案 #

第一步：服务端配置CORS并新增JSON接口

首先安装cors依赖：
npm install cors

修改后的服务端代码：

const express = require('express');
const cors = require('cors');
const app = express();
// 全局配置跨域许可
app.use(cors());

var client_id = "替换为你的实际client_id";
var client_secret = "替换为你的实际client_secret";
var state_val = "RANDOM_STATE";
var redirectURI = "http://localhost:5000/callback";

// 原有HTML返回路由可保留
app.get("/", function (req, res) {
  let api_url =
    "https://www.?????.co.kr/oauth2.0/authorize?response_type=code&client_id=" +
    client_id +
    "&redirect_uri=" +
    redirectURI +
    "&state=" +
    state_val;
  res.send("<a href='" + api_url + "'>로그인</a>");
});

// 新增返回授权URL的JSON接口
app.get("/getAuthUrl", function (req, res) {
  let api_url =
    "https://www.?????.co.kr/oauth2.0/authorize?response_type=code&client_id=" +
    client_id +
    "&redirect_uri=" +
    redirectURI +
    "&state=" +
    state_val;
  res.json({ authUrl: api_url });
});

app.listen(5000, () => {
  console.log("服务已启动，端口5000");
});

第二步：修改前端请求逻辑

import { useState, useEffect } from 'react';

function App() {
  const [authUrl, setAuthUrl] = useState('');

  useEffect(() => {
    fetch("http://localhost:5000/getAuthUrl")
      .then(res => res.json())
      .then(data => {
        console.log('获取到授权地址：', data);
        setAuthUrl(data.authUrl);
      })
      .catch(err => {
        console.error('请求失败：', err);
      });
  }, []);

  return (
    <div>
      <a href={authUrl}>登录</a>
    </div>
  );
}

export default App;

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