OPTIONS and CORS in Ditsmod application

If you haven't heard of the Ditsmod framework, you can check out its documentation.

If your application needs to use the OPTIONS HTTP methods or the CORS or CORS preflight mechanisms, you can use the @ditsmod/cors module.

Install

yarn add @ditsmod/cors

Work with default settings

A finished example with @ditsmod/cors can be viewed in the Ditsmod repository.

The module can work with default settings immediately after import:

import { featureModule } from '@ditsmod/core';
import { CorsModule } from '@ditsmod/cors';

@featureModule({
  imports: [
    CorsModule,
    // ...
  ],
  // ...
})
export class SomeModule {}

Now all routes in SomeModule will be supplemented with new routes with OPTIONS HTTP method. That is, if SomeModule has GET /users and GET /posts routes, they will be automatically supplemented with OPTIONS /users and OPTIONS /posts routes.

You can check the operation of this module with approximately the following queries:

# Simply OPTIONS request
curl -isS localhost:3000 -X OPTIONS

# OPTIONS CORS request
curl -isS localhost:3000 -X OPTIONS -H 'Origin: https://example.com'

# GET CORS request
curl -isS localhost:3000 -H 'Origin: https://example.com'

# CORS Preflight request
curl -isS localhost:3000 \
-X OPTIONS \
-H 'Origin: https://example.com' \
-H 'Access-Control-Request-Method: POST' \
-H 'Access-Control-Request-Headers: X-PINGOTHER, Content-Type'

# CORS request with credentials
curl -isS localhost:3000/credentials

Work with custom settings

If you want to change the default settings, during import you can pass some options that will be taken into account at the module level:

import { featureModule } from '@ditsmod/core';
import { CorsModule } from '@ditsmod/cors';

@featureModule({
  imports: [
    CorsModule.withParams({ origin: 'https://example.com' }),
    // ...
  ],
  // ...
})
export class SomeModule {}

It is also possible to pass CORS options at the route level:

import { featureModule, Providers } from '@ditsmod/core';
import { CorsModule, CorsOpts } from '@ditsmod/cors';

@featureModule({
  imports: [
    CorsModule,
    // ...
  ],
  providersPerRou: [
    ...new Providers()
      .useValue<CorsOpts>(CorsOpts, { origin: 'https://example.com' }),
    // ...
  ],
  // ...
})
export class SomeModule {}

Working with cookies during CORS requests

When you need the CORS HTTP response to contain cookies, and for those cookies to be accepted by web browsers, you can use CorsService:

import { controller, Res, route } from '@ditsmod/core';
import { CorsService } from '@ditsmod/cors';

@controller()
export class SomeController {
  constructor(private res: Res, private corsService: CorsService) {}

  @route('GET')
  getMethod() {
    this.corsService.setCookie('one', 'value for one');
    this.res.send('Some response');
  }
}

As you can see, the cookie is set using the setCookie() method. In this case, the response will contain the Access-Control-Allow-Credentials: true header.

Blog

OPTIONS and CORS in Ditsmod application

Костя Третяк

Install

Work with default settings

Work with custom settings

Working with cookies during CORS requests

Join Our Newsletter. No Spam, Only the good stuff.

Related