Cross-origin resource sharing (CORS) is a mechanism that allows resources to be requested from another domain. Under the hood, Nest makes use of the Express cors package. This package provides various options that you can customize based on your requirements.The CORS mechanism supports secure cross-origin requests and data transfers between browsers and servers.
$ npm install cors
# bootstrap.ts
import cors from 'cors';
import { corsOptions } from './CORS/cors.config';
app.use(cors(corsOptions));
corsOptions
is used to set the configuration options of cors middleware. Here we have set origin option to enable Access-Control-Allow-Origin CORS header.
# cors.config.ts
export const corsOptions = {
origin: ['http://example1.com', 'http://example2.com','http://127.0.0.1:5500'],
}
We can make a fetch request(by writing a simple HTML file) to our server to check whether our CORS configuration are working properly
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Checking CORS</title>
</head>
<body>
<script>
fetch('http://localhost:5000/',{method: 'get'})
.then(res=> res.json())
.then(data => console.log(data));
</script>
</body>
</html>
The result that we got are shown below
Here we can see the response in the console
Here we can see that the responnse header
Access-Control-Allow-Origin
is set to the origin from where we are making fetch request
origin
: Configures the Access-Control-Allow-Origin CORS header. Possible values:Boolean
- setorigin
totrue
to reflect the request origin, as defined byreq.header('Origin')
, or set it tofalse
to disable CORS.String
- setorigin
to a specific origin. For example if you set it to"http://example.com"
only requests from "http://example.com" will be allowed.RegExp
- setorigin
to a regular expression pattern which will be used to test the request origin. If it's a match, the request origin will be reflected. For example the pattern/example\.com$/
will reflect any request that is coming from an origin ending with "example.com".Array
- setorigin
to an array of valid origins. Each origin can be aString
or aRegExp
. For example["http://example1.com", /\.example2\.com$/]
will accept any request from "http://example1.com" or from a subdomain of "example2.com".Function
- setorigin
to a function implementing some custom logic. The function takes the request origin as the first parameter and a callback (called ascallback(err, origin)
, whereorigin
is a non-function value of theorigin
option) as the second.
methods
: Configures the Access-Control-Allow-Methods CORS header. Expects a comma-delimited string (ex: 'GET,PUT,POST') or an array (ex:['GET', 'PUT', 'POST']
).allowedHeaders
: Configures the Access-Control-Allow-Headers CORS header. Expects a comma-delimited string (ex: 'Content-Type,Authorization') or an array (ex:['Content-Type', 'Authorization']
). If not specified, defaults to reflecting the headers specified in the request's Access-Control-Request-Headers header.exposedHeaders
: Configures the Access-Control-Expose-Headers CORS header. Expects a comma-delimited string (ex: 'Content-Range,X-Content-Range') or an array (ex:['Content-Range', 'X-Content-Range']
). If not specified, no custom headers are exposed.credentials
: Configures the Access-Control-Allow-Credentials CORS header. Set totrue
to pass the header, otherwise it is omitted.maxAge
: Configures the Access-Control-Max-Age CORS header. Set to an integer to pass the header, otherwise it is omitted.preflightContinue
: Pass the CORS preflight response to the next handler.optionsSuccessStatus
: Provides a status code to use for successfulOPTIONS
requests, since some legacy browsers (IE11, various SmartTVs) choke on204
.
The default configuration is the equivalent of:
{
"origin": "*",
"methods": "GET,HEAD,PUT,PATCH,POST,DELETE",
"preflightContinue": false,
"optionsSuccessStatus": 204
}