DEV Community

Костя Третяк
Костя Третяк

Posted on • Edited on

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
Enter fullscreen mode Exit fullscreen mode

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 {}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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 {}
Enter fullscreen mode Exit fullscreen mode

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 {}
Enter fullscreen mode Exit fullscreen mode

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');
  }
}
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)