DEV Community

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

Posted on • Edited on

2

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)

typescript

11 Tips That Make You a Better Typescript Programmer

1 Think in {Set}

Type is an everyday concept to programmers, but it’s surprisingly difficult to define it succinctly. I find it helpful to use Set as a conceptual model instead.

#2 Understand declared type and narrowed type

One extremely powerful typescript feature is automatic type narrowing based on control flow. This means a variable has two types associated with it at any specific point of code location: a declaration type and a narrowed type.

#3 Use discriminated union instead of optional fields

...

Read the whole post now!