No 'Access-Control-Allow-Origin' header is present o... | mapbox/mapbox-gl-directions

Nobody has claimed this yet.

I'm trying to set up a simple map that automatically loads directions on the load of the map. Here is my HTML & JS:

<!DOCTYPE html>
<html>

	<head>
		<meta charset='utf-8' />
		<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.2/mapbox-gl.js'></script>
		<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.2/mapbox-gl.css' rel='stylesheet' />
	</head>
	
	<body>
		<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v3.1.2/mapbox-gl-directions.js'></script>
		<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v3.1.2/mapbox-gl-directions.css' type='text/css' />
		<div id='map' style='width: 800px; height: 600px;'></div>
		
		<script>
			mapboxgl.accessToken = '########';
			
			var directions = new MapboxDirections({
				unit: 'metric',
				profile: 'mapbox/walking',
				container: 'directions',
				controls: { inputs: false }
			});
			
			var map = new mapboxgl.Map({
				container: 'map',
				style: 'mapbox://styles/andyfurniss/cjgkq5xda006z2rs21ash68cs',
				center: [116.0724, 5.9749],
				zoom: 10
			});
			
			map.addControl(directions);
			
			map.on('load', function () {
				directions.setOrigin([110.33333, 1.55]);
				directions.setDestination([116.0724, 5.9749]);
			});
		</script>
	</body>

</html>

This is just giving me the following error:

Failed to load https://api.mapbox.com/directions/v5/mapbox/mapbox/walking/110.33333%2C1.55%3B116.0724%2C5.9749.json?geometries=polyline&alternatives=true&steps=true&overview=full&access_token=undefined: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. The response had HTTP status code 404.

What am I doing wrong? Apologies if I'm being a bit stupid, this is the first time I've using Mapbox!

Start by reviewing the MapboxDirections initialization and the generated Directions API request, especially how the access token is supplied. Done means the request is accepted and directions load when the map finishes loading.

Written by the indexing model from the issue text.

No 'Access-Control-Allow-Origin' header is present on the requested resource.

Description

Contributor guide

First steps

Research direction

Assessment