如何在React TypeScript及SPFx WebPart中访问SFTP地址？

首先明确核心限制：浏览器环境无法直接建立SFTP连接（SFTP基于SSH协议，浏览器没有原生支持，且存在跨域问题），因此必须通过后端代理服务中转请求，前端WebPart调用代理接口间接获取SFTP文件内容。

可用的实现库 #

后端代理服务推荐使用Node.js生态的ssh2-sftp-client库，它是目前最流行的SFTP客户端工具之一，支持Promise API，适配TypeScript。

实现步骤 #

1. 搭建后端代理接口 #

用Node.js + Express + ssh2-sftp-client编写一个接口，负责与SFTP服务器建立连接、读取文件并返回内容。示例代码：

import express from 'express';
import Client from 'ssh2-sftp-client';
import cors from 'cors'; // 处理跨域

const app = express();
app.use(cors()); // 允许SPFx所在域名跨域请求
app.use(express.json());

// 读取SFTP文件的接口
app.post('/api/read-sftp-file', async (req, res) => {
  const { host, port, username, password, filePath } = req.body;
  const sftp = new Client();

  try {
    // 连接SFTP服务器
    await sftp.connect({
      host,
      port: port || 22,
      username,
      password
    });
    // 读取文件内容（utf8格式，可根据需求调整）
    const fileContent = await sftp.get(filePath, 'utf8');
    res.status(200).send(fileContent);
  } catch (err) {
    res.status(500).send(`操作失败: ${err instanceof Error ? err.message : '未知错误'}`);
  } finally {
    // 确保关闭连接
    await sftp.end();
  }
});

// 启动服务
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => console.log(`代理服务运行在端口 ${PORT}`));

2. SPFx WebPart中调用代理接口 #

在React TypeScript组件中，使用SPFx的spHttpClient或原生fetch调用上述代理接口，获取文件内容。示例代码：

import { useState } from 'react';
import { spHttpClient, ISPHttpClientOptions } from '@microsoft/sp-http';
import styles from './SftpFileReader.module.scss';

export interface ISftpFileReaderProps {
  context: any;
}

const SftpFileReader = (props: ISftpFileReaderProps) => {
  const [fileContent, setFileContent] = useState<string>('');
  const [errorMsg, setErrorMsg] = useState<string>('');

  const handleReadFile = async () => {
    // SFTP配置信息建议从SharePoint安全存储（如列表、密钥库）获取，不要硬编码
    const sftpConfig = {
      host: 'your-sftp-server-host',
      port: 22,
      username: 'your-sftp-username',
      password: 'your-sftp-password',
      filePath: '/remote/path/to/your/file.txt'
    };

    const requestOptions: ISPHttpClientOptions = {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(sftpConfig)
    };

    try {
      const response = await props.context.spHttpClient.post(
        'https://your-proxy-server-domain/api/read-sftp-file',
        spHttpClient.configurations.v1,
        requestOptions
      );

      if (!response.ok) {
        throw new Error(`HTTP错误: ${response.status} ${response.statusText}`);
      }

      const content = await response.text();
      setFileContent(content);
      setErrorMsg('');
    } catch (err) {
      setErrorMsg(err instanceof Error ? err.message : '读取文件失败');
      setFileContent('');
    }
  };

  return (
    <div className={styles.container}>
      <button className={styles.button} onClick={handleReadFile}>
        读取SFTP文件
      </button>
      {errorMsg && <p className={styles.error}>{errorMsg}</p>}
      {fileContent && (
        <div className={styles.fileContent}>
          <h3>文件内容:</h3>
          <pre>{fileContent}</pre>
        </div>
      )}
    </div>
  );
};

export default SftpFileReader;

关键注意事项 #

• 敏感信息保护：绝对不要在前端代码中硬编码SFTP的用户名、密码等敏感数据，建议从SharePoint的安全配置存储（如加密列表、Azure Key Vault）读取，或由后端通过环境变量管理。
• 权限控制：后端代理服务需添加权限验证逻辑（如API密钥、OAuth2），避免未授权访问。
• 异常处理：完善SFTP连接、文件读取、网络请求各环节的错误捕获与提示，提升用户体验。

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