使用Jupyter-js-Services在React中执行代码时遇Bad Request错误

我之前碰到过类似的情况——内核能正常启动，但WebSocket channels请求偏偏报400错误，这大概率是React环境下全局对象配置不对，或者WebSocket地址、session参数出了问题，咱们一步步来解决：

先换对依赖包 #

首先得提醒你：jupyter-js-services已经被官方废弃了，现在推荐用@jupyterlab/services，先把依赖更新了：

npm uninstall jupyter-js-services
npm install @jupyterlab/services

全局对象配置要适配React环境 #

React（尤其是Create React App）的全局环境和原生浏览器有差异，不能随便用global，得用window，而且别在组件内部临时配置，最好在入口文件（比如index.js）里提前设置：

// src/index.js
import { Kernel } from '@jupyterlab/services';
import XMLHttpRequest from 'xmlhttprequest';

// 给浏览器环境配置XMLHttpRequest
window.XMLHttpRequest = XMLHttpRequest;
// 浏览器自带WebSocket，不需要额外引入ws包，直接用原生的就行
// 如果你的环境有特殊需求，再手动指定window.WebSocket = WebSocket;

检查Kernel初始化的关键配置 #

400错误很多时候是WebSocket地址不匹配，或者手动传了格式错误的session_id导致的——注意jupyter-lab/services会自动生成合法的session_id，不需要你手动指定！

给你一个能正常运行的React组件示例：

import { useState, useEffect } from 'react';
import { Kernel } from '@jupyterlab/services';

function JupyterKernel() {
  const [kernel, setKernel] = useState(null);

  useEffect(() => {
    const initKernel = async () => {
      try {
        // 先获取可用的内核规格
        const specs = await Kernel.getSpecs({ baseUrl: 'http://localhost/api' });
        // 启动新内核，重点配置baseUrl和wsUrl
        const newKernel = await Kernel.startNew({
          baseUrl: 'http://localhost/api',
          wsUrl: 'ws://localhost/api', // 注意http对应ws，https对应wss
          name: specs.default // 用默认内核，比如python3
        });
        setKernel(newKernel);
        console.log('Kernel started:', newKernel.id);

        // 监听内核输出消息
        newKernel.iopubMessage.connect((msg) => {
          if (msg.content.text) {
            console.log('Kernel output:', msg.content.text);
          }
        });

        // 执行测试代码
        const execution = newKernel.requestExecute({ code: 'import sys; print(sys.version)' });
        execution.onDone = () => {
          console.log('Execution finished');
        };
      } catch (err) {
        console.error('Error with kernel:', err);
      }
    };

    initKernel();

    // 组件卸载时关闭内核
    return () => {
      if (kernel) {
        kernel.shutdown();
      }
    };
  }, [kernel]);

  return (
    <div>
      <h3>Jupyter Kernel Integration</h3>
      {kernel ? <p>Kernel ID: {kernel.id}</p> : <p>Starting kernel...</p>}
    </div>
  );
}

export default JupyterKernel;

服务器端的CORS配置要到位 #

如果上面的配置都没问题，那得检查Jupyter服务器的跨域设置，开发环境下启动Jupyter时加上这些参数：

jupyter notebook --NotebookApp.allow_origin='*' --NotebookApp.enable_cors=True --NotebookApp.allow_credentials=True

这样才能确保WebSocket请求能正常跨域。

最后排查点 #

• 确认你的Jupyter服务器端口和代码里的localhost/api一致，比如Jupyter默认是8888，那地址应该是http://localhost:8888/api
• 别手动给channels请求加session_id参数，包会自动处理，手动传很容易格式不对导致400

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