mockaton 6.4.7 → 7.1.0

package/README.md

@@ -12,8 +12,8 @@ my-mocks-dir/api/user/[user-id].GET.200.json
 [This browser extension](https://github.com/ericfortis/devtools-ext-tar-http-requests)
 can be used for downloading a TAR of your XHR requests following that convention.
 
-## What do I use it for?
-- I’m a frontend dev, so I don’t have to spin up and maintain hefty or complex backends.
+## Benefits
+- Avoids having to spin up and maintain hefty or complex backends when developing UIs.
 - For a deterministic and comprehensive backend state. For example, having all the possible
   state variants of a particular collection helps for spotting inadvertent bugs. And having those
   assorted responses are not easy to trigger from the backend.
@@ -42,7 +42,7 @@ The best way to learn _Mockaton_ is by checking out this repo and
 exploring its [sample-mocks/](./sample-mocks) directory. Then, run
 [`./_usage_example.js`](./_usage_example.js) and you’ll see the dashboard.
 
-You can edit mock files without resetting Mockaton. The _Reset_
+You can select mock files without resetting Mockaton. The _Reset_
 button is for when you add, remove, or rename a mock file.
 
 The dropdown lets you pick a mock variant, details in the next section. Next to it is a
@@ -71,6 +71,7 @@ node my-mockaton.js
 ```
 
 ## Config Options
+There’s a Config section below with more details.
 ```ts
 interface Config {
   mocksDir: string
@@ -87,10 +88,12 @@ interface Config {
   extraMimes?: { [fileExt: string]: string }
   extraHeaders?: []
 
+  corsAllowed?: boolean, // Defaults to false
+  // The options for customizing CORS are listed below
+
   onReady?: (dashboardUrl: string) => void // Defaults to trying to open macOS and Win default browser.
 }
 ```
-There’s a Config section below with more details.
 
 ---
 
@@ -259,6 +262,19 @@ Config.extraMimes = {
 }
 ```
 
+## `Config.corsAllowed`
+```js
+Config.corsAllowed = true
+
+// Defaults when `corsAllowed === true`
+Config.corsOrigins = ['*']
+Config.corsMethods = ['GET', 'PUT', 'DELETE', 'POST', 'PATCH', 'HEAD', 'OPTIONS', 'TRACE', 'CONNECT']
+Config.corsHeaders = []
+Config.corsCredentials = true
+Config.corsMaxAge = 0
+Config.corsExposedHeaders = []
+```
+
 ## `Config.onReady`
 This is a callback `(dashboardAddress: string) => void`, which defaults to
 trying to open the dashboard in your default browser in macOS and Windows.
@@ -288,60 +304,52 @@ Config.onReady = open
 
 ---
 
-## API
-
-### Select a mock for a route
+## HTTP API
+`Commander` is a wrapper for the Mockaton HTTP API.
+All of its methods return their `fetch` response promise.
 ```js
-fetch(addr + '/mockaton/edit', {
-  method: 'PATCH',
-  body: JSON.stringify({
-    file: 'api/foo.200.GET.json',
-    delayed: true // optional
-  })
-})
+import { Commander } from 'mockaton'
+
+
+const myMockatonAddr = 'http://localhost:2345'
+const mockaton = new Commander(myMockatonAddr)
 ```
 
+### Select a mock file for a route
+```js
+await mockaton.select('api/foo.200.GET.json')
+```
 ### Select all mocks that have a particular comment
 ```js
-fetch(addr + '/mockaton/bulk-select-by-comment', {
-  method: 'PATCH',
-  body: JSON.stringify('(demo-a)')
-})
+await mockaton.bulkSelectByComment('(demo-a)')
 ```
 
-### List Cookies
-Sends a list of the available cookies along with an "is selected" boolean flag.
+### Set Route is Delayed Flag
 ```js
-fetch(addr + '/mockaton/cookies')
+await mockaton.setRouteIsDelayed('GET', '/api/foo', true)
 ```
 
 ### Select a cookie
-In `Config.cookies`, each key is the label used for changing it.
+In `Config.cookies`, each key is the label used for selecting it.
 ```js
-fetch(addr + '/mockaton/cookies', {
-  method: 'PATCH',
-  body: JSON.stringify('My Normal User')
-})
+await mockaton.selectCookie('My Normal User')
 ```
 
-### Update Fallback Proxy
+### Set Fallback Proxy
 ```js
-fetch(addr + '/mockaton/fallback', {
-  method: 'PATCH',
-  body: JSON.stringify('http://example.com')
-})
+await mockaton.setProxyFallback('http://example.com')
 ```
+Pass an empty string to disable it.
 
 ### Reset
 Re-initialize the collection. So if you added or removed mocks they
 will be considered. The selected mocks, cookies, and delays go
-back to default, but `Config.proxyFalllback` is not affected.
+back to default, but `Config.proxyFallback` is not affected.
 ```js
-fetch(addr + '/mockaton/reset', {
-  method: 'PATCH'
-})
+await mockaton.reset()
 ```
 
+
 ## TODO
-- Dashboard. List `staticDir` and indicate if it’s overriding some mock.
 - Refactor Tests
+- Dashboard. List `staticDir` and indicate if it’s overriding some mock.

package/Tests.js

@@ -11,8 +11,10 @@ import { writeFileSync, mkdtempSync, mkdirSync } from 'node:fs'
 import { Config } from './src/Config.js'
 import { mimeFor } from './src/utils/mime.js'
 import { Mockaton } from './src/Mockaton.js'
+import { Commander } from './src/Commander.js'
 import { parseFilename } from './src/Filename.js'
-import { API, DF, DEFAULT_500_COMMENT, DEFAULT_MOCK_COMMENT } from './src/ApiConstants.js'
+import { PreflightHeader } from './src/utils/http-cors.js'
+import { API, DEFAULT_500_COMMENT, DEFAULT_MOCK_COMMENT } from './src/ApiConstants.js'
 
 
 const tmpDir = mkdtempSync(tmpdir()) + '/'
@@ -36,6 +38,12 @@ const fixtureDefaultInName = [
 	'default my route body content'
 ]
 
+const fixtureDelayed = [
+	'/api/delayed',
+	'api/delayed.GET.200.json',
+	'Route_To_Be_Delayed'
+]
+
 const fixtures = [
 	[
 		'/api',
@@ -45,6 +53,7 @@ const fixtures = [
 
 	// Exact route paths
 	fixtureDefaultInName,
+	fixtureDelayed,
 	[
 		'/api/the-route',
 		'api/the-route(default).GET.200.json',
@@ -135,6 +144,8 @@ writeStatic('index.html', '<h1>Static</h1>')
 writeStatic('assets/app.js', 'const app = 1')
 writeStatic('another-entry/index.html', '<h1>Another</h1>')
 
+
+
 const server = Mockaton({
 	mocksDir: tmpDir,
 	staticDir: staticTmpDir,
@@ -147,11 +158,25 @@ const server = Mockaton({
 	extraHeaders: ['Server', 'MockatonTester'],
 	extraMimes: {
 		my_custom_extension: 'my_custom_mime'
-	}
+	},
+	corsAllowed: true,
+	corsOrigins: ['http://example.com']
 })
 server.on('listening', runTests)
 
+function mockatonAddr() {
+	const { address, port } = server.address()
+	return `http://${address}:${port}`
+}
+
+function request(path, options = {}) {
+	return fetch(`${mockatonAddr()}${path}`, options)
+}
+
+let commander
 async function runTests() {
+	commander = new Commander(mockatonAddr())
+
 	await testItRendersDashboard()
 	await test404()
 
@@ -160,11 +185,7 @@ async function runTests() {
 
 	await testDefaultMock()
 
-	await testItUpdatesDelayAndFile(
-		'/api/alternative',
-		'api/alternative(comment-2).GET.200.json',
-		JSON.stringify({ comment: 2 }))
-
+	await testItUpdatesRouteDelay(...fixtureDelayed)
 	await testBadRequestWhenUpdatingNonExistingMockAlternative()
 
 	await testAutogenerates500(
@@ -176,14 +197,14 @@ async function runTests() {
 		'api/.GET.500.txt',
 		'keeps non-autogenerated 500')
 
-	await reset()
+	await commander.reset()
 	await testItUpdatesTheCurrentSelectedMock(
 		'/api/alternative',
 		'api/alternative(comment-2).GET.200.json',
 		200,
 		JSON.stringify({ comment: 2 }))
 
-	await reset()
+	await commander.reset()
 	await testExtractsAllComments([
 		'(comment-1)',
 		'(comment-2)',
@@ -197,7 +218,7 @@ async function runTests() {
 		['/api/my-route', 'api/my-route(comment-2).GET.200.json', { comment: 2 }]
 	])
 
-	await reset()
+	await commander.reset()
 	for (const [url, file, body] of fixtures)
 		await testMockDispatching(url, file, body)
 
@@ -205,16 +226,15 @@ async function runTests() {
 	await testMockDispatching(...fixtureCustomMime, 'my_custom_mime')
 	await testJsFunctionMocks()
 
+	await testCorsAllowed()
 	await testItUpdatesUserRole()
 	await testStaticFileServing()
 	await testInvalidFilenamesAreIgnored()
 	await testEnableFallbackSoRoutesWithoutMocksGetRelayed()
+
 	server.close()
 }
 
-async function reset() {
-	await request(API.reset, { method: 'PATCH' })
-}
 
 async function testItRendersDashboard() {
 	const res = await request(API.dashboard)
@@ -259,10 +279,7 @@ async function testDefaultMock() {
 }
 
 async function testItUpdatesTheCurrentSelectedMock(url, file, expectedStatus, expectedBody) {
-	await request(API.edit, {
-		method: 'PATCH',
-		body: JSON.stringify({ [DF.file]: file })
-	})
+	await commander.select(file)
 	const res = await request(url)
 	const body = await res.text()
 	await describe('url: ' + url, () => {
@@ -271,19 +288,14 @@ async function testItUpdatesTheCurrentSelectedMock(url, file, expectedStatus, ex
 	})
 }
 
-async function testItUpdatesDelayAndFile(url, file, expectedBody) {
-	await request(API.edit, {
-		method: 'PATCH',
-		body: JSON.stringify({
-			[DF.file]: file,
-			[DF.delayed]: true
-		})
-	})
+async function testItUpdatesRouteDelay(url, file, expectedBody) {
+	const { method } = parseFilename(file)
+	await commander.setRouteIsDelayed(method, url, true)
 	const now = new Date()
 	const res = await request(url)
 	const body = await res.text()
 	await describe('url: ' + url, () => {
-		it('body is: ' + expectedBody, () => equal(body, expectedBody))
+		it('body is: ' + expectedBody, () => equal(body, JSON.stringify(expectedBody)))
 		it('delay', () => equal((new Date()).getTime() - now.getTime() > Config.delay, true))
 	})
 }
@@ -291,20 +303,14 @@ async function testItUpdatesDelayAndFile(url, file, expectedBody) {
 async function testBadRequestWhenUpdatingNonExistingMockAlternative() {
 	await it('There are mocks for /api/the-route but not this one', async () => {
 		const missingFile = 'api/the-route(non-existing-variant).GET.200.json'
-		const res = await request(API.edit, {
-			method: 'PATCH',
-			body: JSON.stringify({ [DF.file]: missingFile })
-		})
+		const res = await commander.select(missingFile)
 		equal(res.status, 400)
 		equal(await res.text(), `Missing Mock: ${missingFile}`)
 	})
 }
 
 async function testAutogenerates500(url, file) {
-	await request(API.edit, {
-		method: 'PATCH',
-		body: JSON.stringify({ [DF.file]: file })
-	})
+	await commander.select(file)
 	const res = await request(url)
 	const body = await res.text()
 	await describe('autogenerated in-memory 500', () => {
@@ -314,10 +320,7 @@ async function testAutogenerates500(url, file) {
 }
 
 async function testPreservesExiting500(url, file, expectedBody) {
-	await request(API.edit, {
-		method: 'PATCH',
-		body: JSON.stringify({ [DF.file]: file })
-	})
+	await commander.select(file)
 	const res = await request(url)
 	const body = await res.text()
 	await describe('preserves existing 500', () => {
@@ -327,17 +330,14 @@ async function testPreservesExiting500(url, file, expectedBody) {
 }
 
 async function testExtractsAllComments(expected) {
-	const res = await request(API.comments)
+	const res = await commander.listComments()
 	const body = await res.json()
 	await it('Extracts all comments without duplicates', () =>
 		deepEqual(body, expected))
 }
 
 async function testItBulkSelectsByComment(comment, tests) {
-	await request(API.bulkSelect, {
-		method: 'PATCH',
-		body: JSON.stringify(comment)
-	})
+	await commander.bulkSelectByComment(comment)
 	for (const [url, file, body] of tests)
 		await testMockDispatching(url, file, body)
 }
@@ -346,7 +346,7 @@ async function testItBulkSelectsByComment(comment, tests) {
 async function testItUpdatesUserRole() {
 	await describe('Cookie', () => {
 		it('Defaults to the first key:value', async () => {
-			const res = await request(API.cookies)
+			const res = await commander.listCookies()
 			deepEqual(await res.json(), [
 				['userA', true],
 				['userB', false]
@@ -354,11 +354,8 @@ async function testItUpdatesUserRole() {
 		})
 
 		it('Update the selected cookie', async () => {
-			await request(API.cookies, {
-				method: 'PATCH',
-				body: JSON.stringify('userB')
-			})
-			const res = await request(API.cookies)
+			await commander.selectCookie('userB')
+			const res = await commander.listCookies()
 			deepEqual(await res.json(), [
 				['userA', false],
 				['userB', true]
@@ -374,7 +371,7 @@ export default function (req, response) {
   response.setHeader('content-type', 'custom-mime')
   return 'SOME_STRING'
 }`)
-		await reset() // for registering the file
+		await commander.reset() // for registering the file
 		await testMockDispatching('/api/js-func',
 			'api/js-func.POST.200.js',
 			'SOME_STRING',
@@ -416,7 +413,7 @@ async function testInvalidFilenamesAreIgnored() {
 		write('api/_INVALID_FILENAME_CONVENTION_.json', '')
 		write('api/bad-filename-method._INVALID_METHOD_.200.json', '')
 		write('api/bad-filename-status.GET._INVALID_STATUS_.json', '')
-		await reset()
+		await commander.reset()
 		equal(consoleErrorSpy.mock.calls[0].arguments[0], 'Invalid Filename Convention')
 		equal(consoleErrorSpy.mock.calls[1].arguments[0], 'Unrecognized HTTP Method: "_INVALID_METHOD_"')
 		equal(consoleErrorSpy.mock.calls[2].arguments[0], 'Invalid HTTP Response Status: "NaN"')
@@ -432,10 +429,7 @@ async function testEnableFallbackSoRoutesWithoutMocksGetRelayed() {
 		})
 		await promisify(fallbackServer.listen).bind(fallbackServer, 0, '127.0.0.1')()
 
-		await request(API.fallback, { // Enable fallback
-			method: 'PATCH',
-			body: JSON.stringify(`http://localhost:${fallbackServer.address().port}`)
-		})
+		await commander.setProxyFallback(`http://localhost:${fallbackServer.address().port}`)
 		await it('Relays to fallback server', async () => {
 			const res = await request('/non-existing-mock')
 			equal(res.headers.get('custom_header'), 'my_custom_header')
@@ -446,6 +440,23 @@ async function testEnableFallbackSoRoutesWithoutMocksGetRelayed() {
 	})
 }
 
+// TODO make API for changing CORS? so we can automate testing?
+async function testCorsAllowed() {
+	await it('cors', async () => {
+		const res = await request('/does-not-matter', {
+			method: 'OPTIONS',
+			headers: {
+				[PreflightHeader.Origin]: 'http://example.com',
+				[PreflightHeader.AccessControlRequestMethod]: 'GET'
+			}
+		})
+		equal(res.status, 204)
+		equal(res.headers.get(PreflightHeader.AccessControlAllowOrigin), 'http://example.com')
+		equal(res.headers.get(PreflightHeader.AccessControlAllowMethods), 'GET')
+	})
+}
+
+
 // Utils
 
 function write(filename, data) {
@@ -461,8 +472,3 @@ function _write(absPath, data) {
 	writeFileSync(absPath, data, 'utf8')
 }
 
-function request(path, options = {}) {
-	const { address, port } = server.address()
-	return fetch(`http://${address}:${port}${path}`, options)
-}
-

package/index.d.ts

@@ -15,9 +15,40 @@ interface Config {
 	extraHeaders?: [string, string][]
 	extraMimes?: { [fileExt: string]: string }
 
+	corsAllowed?: boolean,
+	corsOrigins: string[]
+	corsMethods: string[]
+	corsHeaders: string[]
+	corsExposedHeaders: string[]
+	corsCredentials: boolean
+	corsMaxAge: number
+
 	onReady?: (address: string) => void
 }
 
+
 export function Mockaton(options: Config): Server
 
+
 export function jwtCookie(cookieName: string, payload: any): string
+
+
+export class Commander {
+	constructor(addr: string)
+
+	select(file: string): Promise<Response>
+
+	bulkSelectByComment(comment: string): Promise<Response>
+
+	setRouteIsDelayed(routeMethod: string, routeUrlMask: string, delayed: boolean): Promise<Response>
+
+	selectCookie(cookieKey: string): Promise<Response>
+
+	setProxyFallback(proxyAddr: string): Promise<Response>
+
+	reset(): Promise<Response>
+
+	listCookies(): Promise<Response>
+
+	listComments(): Promise<Response>
+}

package/index.js

@@ -1,2 +1,3 @@
 export { Mockaton } from './src/Mockaton.js'
 export { jwtCookie } from './src/utils/jwt.js'
+export { Commander } from './src/Commander.js'

package/package.json

@@ -2,7 +2,7 @@
 	"name": "mockaton",
 	"description": "A deterministic server-side for developing and testing frontend clients",
 	"type": "module",
-	"version": "6.4.7",
+	"version": "7.1.0",
 	"main": "index.js",
 	"types": "index.d.ts",
 	"license": "MIT",

package/src/Api.js

@@ -25,7 +25,8 @@ export const apiGetRequests = new Map([
 ])
 
 export const apiPatchRequests = new Map([
-	[API.edit, updateBroker],
+	[API.select, selectMock],
+	[API.delay, setRouteIsDelayed],
 	[API.reset, reinitialize],
 	[API.cookies, selectCookie],
 	[API.fallback, updateProxyFallback],
@@ -45,6 +46,7 @@ function reinitialize(_, response) {
 	sendOK(response)
 }
 
+
 async function selectCookie(req, response) {
 	try {
 		cookie.setCurrent(await parseJSON(req))
@@ -55,16 +57,14 @@ async function selectCookie(req, response) {
 	}
 }
 
-async function updateBroker(req, response) {
+
+async function selectMock(req, response) {
 	try {
-		const body = await parseJSON(req)
-		const file = body[DF.file]
+		const file = await parseJSON(req)
 		const broker = mockBrokersCollection.getBrokerByFilename(file)
 		if (!broker || !broker.mockExists(file))
 			throw `Missing Mock: ${file}`
 
-		if (DF.delayed in body)
-			broker.updateDelay(body[DF.delayed])
 		broker.updateFile(file)
 		sendOK(response)
 	}
@@ -73,6 +73,26 @@ async function updateBroker(req, response) {
 	}
 }
 
+
+async function setRouteIsDelayed(req, response) {
+	try {
+		const body = await parseJSON(req)
+		const broker = mockBrokersCollection.getBrokerForUrl(
+			body[DF.routeMethod],
+			body[DF.routeUrlMask])
+
+		if (!broker)
+			throw `Route does not exist: ${body[DF.routeUrlMask]} ${body[DF.routeUrlMask]}`
+
+		broker.updateDelay(body[DF.delayed])
+		sendOK(response)
+	}
+	catch (error) {
+		sendBadRequest(response, error)
+	}
+}
+
+
 async function updateProxyFallback(req, response) {
 	try {
 		Config.proxyFallback = await parseJSON(req)
@@ -83,6 +103,7 @@ async function updateProxyFallback(req, response) {
 	}
 }
 
+
 async function bulkUpdateBrokersByCommentTag(req, response) {
 	try {
 		mockBrokersCollection.setMocksMatchingComment(await parseJSON(req))

package/src/ApiConstants.js

@@ -3,7 +3,8 @@ export const API = {
 	dashboard: MOUNT,
 	bulkSelect: MOUNT + '/bulk-select-by-comment',
 	comments: MOUNT + '/comments',
-	edit: MOUNT + '/edit',
+	select: MOUNT + '/select',
+	delay: MOUNT + '/delay',
 	mocks: MOUNT + '/mocks',
 	reset: MOUNT + '/reset',
 	cookies: MOUNT + '/cookies',
@@ -11,8 +12,9 @@ export const API = {
 }
 
 export const DF = { // Dashboard Fields (XHR)
-	delayed: 'delayed',
-	file: 'file'
+	routeMethod: 'route_method',
+	routeUrlMask: 'route_url_mask',
+	delayed: 'delayed'
 }
 
 export const DEFAULT_500_COMMENT = '(Mockaton 500)'

package/src/Commander.js

@@ -0,0 +1,54 @@
+import { API, DF } from './ApiConstants.js'
+
+
+export class Commander {
+	#addr = ''
+	constructor(addr) {
+		this.#addr = addr
+	}
+
+	select(file) {
+		return this.#patch(API.select, file)
+	}
+	bulkSelectByComment(comment) {
+		return this.#patch(API.bulkSelect, comment)
+	}
+
+	setRouteIsDelayed(routeMethod, routeUrlMask, delayed) {
+		return this.#patch(API.delay, {
+			[DF.routeMethod]: routeMethod,
+			[DF.routeUrlMask]: routeUrlMask,
+			[DF.delayed]: delayed
+		})
+	}
+
+	listCookies() {
+		return this.#get(API.cookies)
+	}
+	selectCookie(cookieKey) {
+		return this.#patch(API.cookies, cookieKey)
+	}
+
+	listComments() {
+		return this.#get(API.comments)
+	}
+
+	setProxyFallback(proxyAddr) {
+		return this.#patch(API.fallback, proxyAddr)
+	}
+
+	reset() {
+		return this.#patch(API.reset)
+	}
+
+
+	#get(api) {
+		return fetch(this.#addr + api)
+	}
+	#patch(api, body) {
+		return fetch(this.#addr + api, {
+			method: 'PATCH',
+			body: JSON.stringify(body)
+		})
+	}
+}

package/src/Config.js

@@ -1,6 +1,7 @@
+import { isDirectory } from './utils/fs.js'
 import { openInBrowser } from './utils/openInBrowser.js'
+import { StandardMethods } from './utils/http-request.js'
 import { validate, is, optional } from './utils/validate.js'
-import { isDirectory } from './utils/fs.js'
 
 
 export const Config = Object.seal({
@@ -18,6 +19,14 @@ export const Config = Object.seal({
 	extraHeaders: [],
 	extraMimes: {},
 
+	corsAllowed: false,
+	corsOrigins: ['*'],
+	corsMethods: StandardMethods,
+	corsHeaders: [],
+	corsExposedHeaders: [],
+	corsCredentials: true,
+	corsMaxAge: 0,
+
 	onReady: openInBrowser
 })
 
@@ -36,11 +45,39 @@ export function setup(options) {
 
 		delay: ms => Number.isInteger(ms) && ms > 0,
 		cookies: is(Object),
-		extraHeaders: Array.isArray,
+		extraHeaders: val => Array.isArray(val) && val.length % 2 === 0,
 		extraMimes: is(Object),
 
+		corsAllowed: is(Boolean),
+		corsOrigins: validateCorsAllowedOrigins,
+		corsMethods: validateCorsAllowedMethods,
+		corsHeaders: Array.isArray,
+		corsExposedHeaders: Array.isArray,
+		corsCredentials: is(Boolean),
+		corsMaxAge: is(Number),
+
 		onReady: is(Function)
 	})
+
+	if (!Config.corsAllowed) // TESTME
+		Config.corsOrigins = []
+}
+
+
+function validateCorsAllowedOrigins(arr) {
+	if (!Array.isArray(arr))
+		return false
+
+	if (arr.length === 1 && arr[0] === '*')
+		return true
+
+	return arr.every(o => URL.canParse(o))
 }
 
 
+function validateCorsAllowedMethods(arr) {
+	if (!Array.isArray(arr))
+		return false
+
+	return arr.every(m => StandardMethods.includes(m))
+}

package/src/Dashboard.js

@@ -133,7 +133,7 @@ function SectionByMethod({ method, brokers }) {
 					r('tr', null,
 						r('td', null, r(PreviewLink, { method, urlMask })),
 						r('td', null, r(MockSelector, { broker })),
-						r('td', null, r(DelayToggler, { broker })),
+						r('td', null, r(DelayRouteToggler, { broker })),
 						r('td', null, r(InternalServerErrorToggler, { broker }))
 					))))
 }
@@ -188,9 +188,9 @@ function MockSelector({ broker }) {
 				this.style.fontWeight = this.value === this.options[0].value // default is selected
 					? 'normal'
 					: 'bold'
-				fetch(API.edit, {
+				fetch(API.select, {
 					method: 'PATCH',
-					body: JSON.stringify({ [DF.file]: this.value })
+					body: JSON.stringify(this.value)
 				})
 					.then(() => {
 						this.closest('tr').querySelector('a').click()
@@ -205,7 +205,7 @@ function MockSelector({ broker }) {
 		}, file))))
 }
 
-function DelayToggler({ broker }) {
+function DelayRouteToggler({ broker }) {
 	const name = broker.currentMock.file
 	const checked = Boolean(broker.currentMock.delay)
 	return (
@@ -219,10 +219,12 @@ function DelayToggler({ broker }) {
 				name,
 				checked,
 				onChange(event) {
-					fetch(API.edit, {
+					const { method, urlMask } = parseFilename(this.name)
+					fetch(API.delay, {
 						method: 'PATCH',
 						body: JSON.stringify({
-							[DF.file]: this.name,
+							[DF.routeMethod]: method,
+							[DF.routeUrlMask]: urlMask,
 							[DF.delayed]: event.currentTarget.checked
 						})
 					})
@@ -252,13 +254,11 @@ function InternalServerErrorToggler({ broker }) {
 				name,
 				checked,
 				onChange(event) {
-					fetch(API.edit, {
+					fetch(API.select, {
 						method: 'PATCH',
-						body: JSON.stringify({
-							[DF.file]: event.currentTarget.checked
-								? items.find(f => parseFilename(f).status === 500)
-								: items[0]
-						})
+						body: JSON.stringify(event.currentTarget.checked
+							? items.find(f => parseFilename(f).status === 500)
+							: items[0])
 					})
 						.then(init)
 						.catch(console.error)

package/src/Mockaton.js

@@ -1,10 +1,11 @@
 import { createServer } from 'node:http'
 
 import { API } from './ApiConstants.js'
-import { Config, setup } from './Config.js'
 import { dispatchMock } from './MockDispatcher.js'
+import { Config, setup } from './Config.js'
 import * as mockBrokerCollection from './mockBrokersCollection.js'
 import { dispatchStatic, isStatic } from './StaticDispatcher.js'
+import { setCorsHeaders, isPreflight } from './utils/http-cors.js'
 import { apiPatchRequests, apiGetRequests } from './Api.js'
 
 
@@ -12,30 +13,48 @@ export function Mockaton(options) {
 	setup(options)
 	mockBrokerCollection.init()
 
-	return createServer(async (req, response) => {
-		response.setHeader('Server', 'Mockaton')
+	const server = createServer(onRequest)
+	server.listen(Config.port, Config.host, (error) => {
+		const { address, port } = server.address()
+		const url = `http://${address}:${port}`
+		console.log('Listening', url)
+		console.log('Dashboard', url + API.dashboard)
+		if (error)
+			console.error(error)
+		else
+			Config.onReady(url + API.dashboard)
+	})
+	return server
+}
 
-		const { url, method } = req
-		if (method === 'GET' && apiGetRequests.has(url))
-			apiGetRequests.get(url)(req, response)
+async function onRequest(req, response) {
+	const { url, method } = req
+	response.setHeader('Server', 'Mockaton')
+
+	if (Config.corsAllowed)
+		setCorsHeaders(req, response, {
+			origins: Config.corsOrigins,
+			headers: Config.corsHeaders,
+			methods: Config.corsMethods,
+			maxAge: Config.corsMaxAge,
+			credentials: Config.corsCredentials,
+			exposedHeaders: Config.extraHeaders
+		})
 
-		else if (method === 'PATCH' && apiPatchRequests.has(url))
-			await apiPatchRequests.get(url)(req, response)
 
-		else if (isStatic(req))
-			await dispatchStatic(req, response)
+	if (isPreflight(req)) {
+		response.statusCode = 204
+		response.end()
+	}
+	else if (method === 'GET' && apiGetRequests.has(url))
+		apiGetRequests.get(url)(req, response)
 
-		else
-			await dispatchMock(req, response)
-	})
-		.listen(Config.port, Config.host, function (error) {
-			const { address, port } = this.address()
-			const url = `http://${address}:${port}`
-			console.log('Listening', url)
-			console.log('Dashboard', url + API.dashboard)
-			if (error)
-				console.error(error)
-			else
-				Config.onReady(url + API.dashboard)
-		})
+	else if (method === 'PATCH' && apiPatchRequests.has(url))
+		await apiPatchRequests.get(url)(req, response)
+
+	else if (isStatic(req))
+		await dispatchStatic(req, response)
+
+	else
+		await dispatchMock(req, response)
 }

package/src/utils/http-cors.js

@@ -0,0 +1,70 @@
+import { StandardMethods } from './http-request.js'
+
+// https://www.w3.org/TR/2020/SPSD-cors-20200602/#resource-processing-model
+
+export const PreflightHeader = {
+	// request
+	Origin: 'origin',
+	AccessControlRequestMethod: 'access-control-request-method',
+	AccessControlRequestHeaders: 'access-control-request-headers', // Comma separated
+
+	// response
+	AccessControlMaxAge: 'Access-Control-Max-Age',
+	AccessControlAllowOrigin: 'Access-Control-Allow-Origin', // '*' | Space delimited | null
+	AccessControlAllowMethods: 'Access-Control-Allow-Methods', // '*' | Comma delimited
+	AccessControlAllowHeaders: 'Access-Control-Allow-Headers', // '*' | Comma delimited 
+	AccessControlExposeHeaders: 'Access-Control-Expose-Headers', // '*' | Comma delimited 
+	AccessControlAllowCredentials: 'Access-Control-Allow-Credentials' // 'true'
+}
+const PH = PreflightHeader
+
+
+export function isPreflight(req) {
+	return req.method === 'OPTIONS'
+		&& URL.canParse(req.headers[PH.Origin])
+		&& StandardMethods.includes(req.headers[PH.AccessControlRequestMethod])
+}
+
+
+export function setCorsHeaders(req, response, {
+	origins = [],
+	methods = [],
+	headers = [],
+	exposedHeaders = [],
+	credentials = false,
+	maxAge = 0
+}) {
+	const reqOrigin = req.headers[PH.Origin]
+	const hasWildcard = origins.some(ao => ao === '*')
+	if (!reqOrigin || (!hasWildcard && !origins.includes(reqOrigin)))
+		return
+	response.setHeader(PH.AccessControlAllowOrigin, reqOrigin) // Never '*', so no need to `Vary` it
+
+	if (credentials)
+		response.setHeader(PH.AccessControlAllowCredentials, 'true')
+
+	if (req.headers[PH.AccessControlRequestMethod])
+		setPreflightSpecificHeaders(req, response, methods, headers, maxAge)
+	else
+		setActualRequestHeaders(response, exposedHeaders)
+}
+
+
+function setPreflightSpecificHeaders(req, response, methods, headers, maxAge) {
+	const methodAskingFor = req.headers[PH.AccessControlRequestMethod]
+	if (!methods.includes(methodAskingFor))
+		return
+
+	response.setHeader(PH.AccessControlAllowMethods, methodAskingFor)
+	if (headers.length)
+		response.setHeader(PH.AccessControlAllowHeaders, headers.join(','))
+
+	response.setHeader(PH.AccessControlMaxAge, maxAge)
+}
+
+
+function setActualRequestHeaders(response, exposedHeaders) {
+	// Exposed means the client-side JavaScript can read them
+	if (exposedHeaders.length)
+		response.setHeader(PH.AccessControlExposeHeaders, exposedHeaders.join(','))
+}

package/src/utils/http-cors.test.js

@@ -0,0 +1,190 @@
+import { equal } from 'node:assert/strict'
+import { promisify } from 'node:util'
+import { createServer } from 'node:http'
+import { describe, it, after } from 'node:test'
+import { isPreflight, setCorsHeaders, PreflightHeader as PH } from './http-cors.js'
+
+
+function headerIs(response, header, value) {
+	equal(response.headers.get(header), value)
+}
+
+const FooDotCom = 'http://foo.com'
+const AllowedDotCom = 'http://allowed.com'
+const NotAllowedDotCom = 'http://not-allowed.com'
+
+await describe('CORS', async () => {
+	let corsAllow = {}
+
+	const server = createServer((req, response) => {
+		if (isPreflight(req)) {
+			setCorsHeaders(req, response, corsAllow)
+			response.statusCode = 204
+			response.end()
+			return
+		}
+		response.end('NON_PREFLIGHT')
+	})
+	await promisify(server.listen).bind(server, 0, '127.0.0.1')()
+	after(() => {
+		server.close()
+	})
+	function preflight(headers, method = 'OPTIONS') {
+		const { address, port } = server.address()
+		return fetch(`http://${address}:${port}/`, { method, headers })
+	}
+
+	await describe('Identifies Preflight Requests', async () => {
+		const requiredRequestHeaders = {
+			[PH.Origin]: 'http://locahost:9999',
+			[PH.AccessControlRequestMethod]: 'POST'
+		}
+
+		await it('Ignores non-OPTIONS requests', async () => {
+			const res = await preflight(requiredRequestHeaders, 'POST')
+			equal(await res.text(), 'NON_PREFLIGHT')
+		})
+
+		await it(`Ignores non-parseable req ${PH.Origin} header`, async () => {
+			const headers = {
+				...requiredRequestHeaders,
+				[PH.Origin]: 'non-url'
+			}
+			const res = await preflight(headers)
+			equal(await res.text(), 'NON_PREFLIGHT')
+		})
+
+		await it(`Ignores missing method in ${PH.AccessControlRequestMethod} header`, async () => {
+			const headers = { ...requiredRequestHeaders }
+			delete headers[PH.AccessControlRequestMethod]
+			const res = await preflight(headers)
+			equal(await res.text(), 'NON_PREFLIGHT')
+		})
+
+		await it(`Ignores non-standard method in ${PH.AccessControlRequestMethod} header`, async () => {
+			const headers = {
+				...requiredRequestHeaders,
+				[PH.AccessControlRequestMethod]: 'NON_STANDARD'
+			}
+			const res = await preflight(headers)
+			equal(await res.text(), 'NON_PREFLIGHT')
+		})
+
+		await it('204 valid preflights', async () => {
+			const res = await preflight(requiredRequestHeaders)
+			equal(res.status, 204)
+		})
+	})
+
+	await describe('Preflight Response Headers', async () => {
+		await it('no origins allowed', async () => {
+			corsAllow = {
+				origins: [],
+				methods: ['GET']
+			}
+			const p = await preflight({
+				[PH.Origin]: FooDotCom,
+				[PH.AccessControlRequestMethod]: 'GET'
+			})
+			headerIs(p, PH.AccessControlAllowOrigin, null)
+			headerIs(p, PH.AccessControlAllowMethods, null)
+			headerIs(p, PH.AccessControlAllowCredentials, null)
+			headerIs(p, PH.AccessControlAllowHeaders, null)
+		})
+
+		await it('not in allowed origins', async () => {
+			corsAllow = {
+				origins: [AllowedDotCom],
+				methods: ['GET']
+			}
+			const p = await preflight({
+				[PH.Origin]: NotAllowedDotCom,
+				[PH.AccessControlRequestMethod]: 'GET'
+			})
+			headerIs(p, PH.AccessControlAllowOrigin, null)
+			headerIs(p, PH.AccessControlAllowMethods, null)
+			headerIs(p, PH.AccessControlAllowCredentials, null)
+			headerIs(p, PH.AccessControlAllowHeaders, null)
+		})
+
+		await it('origin and method match', async () => {
+			corsAllow = {
+				origins: [AllowedDotCom],
+				methods: ['GET']
+			}
+			const p = await preflight({
+				[PH.Origin]: AllowedDotCom,
+				[PH.AccessControlRequestMethod]: 'GET'
+			})
+			headerIs(p, PH.AccessControlAllowOrigin, AllowedDotCom)
+			headerIs(p, PH.AccessControlAllowMethods, 'GET')
+			headerIs(p, PH.AccessControlAllowCredentials, null)
+			headerIs(p, PH.AccessControlAllowHeaders, null)
+		})
+
+		await it('origin matches from multiple', async () => {
+			corsAllow = {
+				origins: [AllowedDotCom, FooDotCom],
+				methods: ['GET']
+			}
+			const p = await preflight({
+				[PH.Origin]: AllowedDotCom,
+				[PH.AccessControlRequestMethod]: 'GET'
+			})
+			headerIs(p, PH.AccessControlAllowOrigin, AllowedDotCom)
+			headerIs(p, PH.AccessControlAllowMethods, 'GET')
+			headerIs(p, PH.AccessControlAllowCredentials, null)
+			headerIs(p, PH.AccessControlAllowHeaders, null)
+		})
+
+		await it('wildcard origin', async () => {
+			corsAllow = {
+				origins: ['*'],
+				methods: ['GET']
+			}
+			const p = await preflight({
+				[PH.Origin]: FooDotCom,
+				[PH.AccessControlRequestMethod]: 'GET'
+			})
+			headerIs(p, PH.AccessControlAllowOrigin, FooDotCom)
+			headerIs(p, PH.AccessControlAllowMethods, 'GET')
+			headerIs(p, PH.AccessControlAllowCredentials, null)
+			headerIs(p, PH.AccessControlAllowHeaders, null)
+		})
+
+		await it(`wildcard and credentials`, async () => {
+			corsAllow = {
+				origins: ['*'],
+				methods: ['GET'],
+				credentials: true
+			}
+			const p = await preflight({
+				[PH.Origin]: FooDotCom,
+				[PH.AccessControlRequestMethod]: 'GET'
+			})
+			headerIs(p, PH.AccessControlAllowOrigin, FooDotCom)
+			headerIs(p, PH.AccessControlAllowMethods, 'GET')
+			headerIs(p, PH.AccessControlAllowCredentials, 'true')
+			headerIs(p, PH.AccessControlAllowHeaders, null)
+		})
+
+		await it(`wildcard, credentials, and headers`, async () => {
+			corsAllow = {
+				origins: ['*'],
+				methods: ['GET'],
+				credentials: true,
+				headers: ['content-type', 'my-header']
+			}
+			const p = await preflight({
+				[PH.Origin]: FooDotCom,
+				[PH.AccessControlRequestMethod]: 'GET'
+			})
+			headerIs(p, PH.AccessControlAllowOrigin, FooDotCom)
+			headerIs(p, PH.AccessControlAllowMethods, 'GET')
+			headerIs(p, PH.AccessControlAllowCredentials, 'true')
+			headerIs(p, PH.AccessControlAllowHeaders, 'content-type,my-header')
+		})
+	})
+
+	// TODO Actual request response headers
+})

package/src/utils/http-request.js

@@ -1,3 +1,9 @@
+export const StandardMethods = [
+	'GET', 'PUT', 'DELETE', 'POST', 'PATCH',
+	'HEAD', 'OPTIONS', 'TRACE', 'CONNECT'
+]
+
+
 export class JsonBodyParserError extends Error {}
 
 export function parseJSON(req) {
@@ -33,4 +39,4 @@ export function parseJSON(req) {
 				}
 		}
 	})
-}
+}