minrk · April 13, 2021 05:36
diff --git a/index.html b/index.html
 <html>
 <head>
  <title>JupyterHub CORS test</title>
  <script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous">
 </script>
 <style type="text/css">
 input[type=text] {
  width: 50ex;
 }
 </style>
 </head>
 <body>

  <p>
    To run this test:

    <ol>
      <li>Get your API token from the JupyterHub token page and paste the value in the field below.</li>
      <li>Start your notebook with the Hub and paste the URL for your server in the field below.</li>
      <li>Click the test button to make an AJAX request to the server</li>
    </ol>

    If CORS is enabled, this request will succeed and show the notebook status. Otherwise, it will be rejected.
  </p>

  <label for="url">JupyterHub URL:</label>
  <input type="text" id="url" placeholder="jupyterhub URL" value="http://127.0.0.1:8000"/>
  <br>
  <label for="token">JupyterHub token:</label>
  <input type="text" id="token" placeholder="paste your token here"/>
  <br>
  <button id="test-button">test</button>
  <br>


  <div>Username: <span id="username"></span></div>
  <div>Status: <span id="status"></span></div>
  <div>
    output:
    <br>
    <pre id="output"></pre>
  </div>

  <script type="text/javascript">

    function fail(err) {
      $("#output").text("Failed! Check the console.");
      console.error(err);
    }

    function test() {
      var token = $("#token").val().trim();
      var hub_url = $("#url").val().trim();

      if ( ! /\/$/.exec(hub_url) ) {
        // ensure trailing slash
        hub_url = hub_url + '/';
      }
      var hub_api = hub_url + 'hub/api/';
      var headers = { Authorization: "token " + token };
    // check the user
    $.get({
      url: hub_api + 'user',
      headers: headers,
    }).then(function (user) {
      console.log(user);
      $("#username").text(user.name);
      if (!user.server) {
        // if not running, start the server and fetch user info again
        $("#status").text("starting...");
        console.log("starting")
        return $.post({
          url: hub_api + 'users/' + user.name + '/server',
          headers: headers,
        }).then(function () {
          $("#status").text("started");
          return $.get({
            url: hub_api + 'user',
            headers: headers,
          });
        });
      } else {
        return user;
      }
    }).catch(fail)
    .then(function (user) {
      console.log('running', user)
      $("#status").text("running");
      var user_url = hub_url + user.server.replace(/^\//, '');
      return $.get({
        url: user_url + 'api/status',
        headers: headers,
      }).then(function (reply) {
        $("#status").text("done");
        $("#output").text(JSON.stringify(reply, null, 2));
      }).catch(fail);
    });
  }

  $('#test-button').click(test);
  test()

 </script>
 </body>
 </html>
diff --git a/jupyterhub_config.py b/jupyterhub_config.py
 # the origin from which you would like to allow cross-origin requests

 origin = 'http://localhost:9999'

 c.Spawner.args = [f'--NotebookApp.allow_origin={origin}']
 c.JupyterHub.tornado_settings = {
    'headers': {
        'Access-Control-Allow-Origin': origin,
    },
 }
	<html>
	<head>
	<title>JupyterHub CORS test</title>
	<script
	src="https://code.jquery.com/jquery-3.2.1.min.js"
	integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
	crossorigin="anonymous">
	</script>
	<style type="text/css">
	input[type=text] {
	width: 50ex;
	}
	</style>
	</head>
	<body>

	<p>
	To run this test:

	<ol>
	<li>Get your API token from the JupyterHub token page and paste the value in the field below.</li>
	<li>Start your notebook with the Hub and paste the URL for your server in the field below.</li>
	<li>Click the test button to make an AJAX request to the server</li>
	</ol>

	If CORS is enabled, this request will succeed and show the notebook status. Otherwise, it will be rejected.
	</p>

	<label for="url">JupyterHub URL:</label>
	<input type="text" id="url" placeholder="jupyterhub URL" value="http://127.0.0.1:8000"/>
	<br>
	<label for="token">JupyterHub token:</label>
	<input type="text" id="token" placeholder="paste your token here"/>
	<br>
	<button id="test-button">test</button>
	<br>


	<div>Username: <span id="username"></span></div>
	<div>Status: <span id="status"></span></div>
	<div>
	output:
	<br>
	<pre id="output"></pre>
	</div>

	<script type="text/javascript">

	function fail(err) {
	$("#output").text("Failed! Check the console.");
	console.error(err);
	}

	function test() {
	var token = $("#token").val().trim();
	var hub_url = $("#url").val().trim();

	if ( ! /\/$/.exec(hub_url) ) {
	// ensure trailing slash
	hub_url = hub_url + '/';
	}
	var hub_api = hub_url + 'hub/api/';
	var headers = { Authorization: "token " + token };
	// check the user
	$.get({
	url: hub_api + 'user',
	headers: headers,
	}).then(function (user) {
	console.log(user);
	$("#username").text(user.name);
	if (!user.server) {
	// if not running, start the server and fetch user info again
	$("#status").text("starting...");
	console.log("starting")
	return $.post({
	url: hub_api + 'users/' + user.name + '/server',
	headers: headers,
	}).then(function () {
	$("#status").text("started");
	return $.get({
	url: hub_api + 'user',
	headers: headers,
	});
	});
	} else {
	return user;
	}
	}).catch(fail)
	.then(function (user) {
	console.log('running', user)
	$("#status").text("running");
	var user_url = hub_url + user.server.replace(/^\//, '');
	return $.get({
	url: user_url + 'api/status',
	headers: headers,
	}).then(function (reply) {
	$("#status").text("done");
	$("#output").text(JSON.stringify(reply, null, 2));
	}).catch(fail);
	});
	}

	$('#test-button').click(test);
	test()

	</script>
	</body>
	</html>
	# the origin from which you would like to allow cross-origin requests

	origin = 'http://localhost:9999'

	c.Spawner.args = [f'--NotebookApp.allow_origin={origin}']
	c.JupyterHub.tornado_settings = {
	'headers': {
	'Access-Control-Allow-Origin': origin,
	},
	}