Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: made changes to CORS usage/config #2784

Merged
merged 1 commit into from
Dec 13, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 18 additions & 4 deletions docs/content/advanced/backend/endpoints/add.md
Original file line number Diff line number Diff line change
Expand Up @@ -46,14 +46,28 @@ You can also create endpoints that don't reside under these two prefixes, simila

If you’re adding a storefront or admin endpoint and you want to access these endpoints from the storefront or Medusa admin, you need to pass your endpoints Cross-Origin Resource Origin (CORS) options using the `cors` package.

First, you need to import your Medusa configurations along with the `cors` library:
First, you need to import the necessary utility functions and types from Medusa's packages with the `cors` library:

```ts
import { getConfigFile, parseCorsOrigins } from "medusa-core-utils"
import { ConfigModule } from "@medusajs/medusa/dist/types/global"
import cors from "cors"
import { projectConfig } from "../../medusa-config"
```

Then, create an object that will hold the Cross-Origin Resource Sharing (CORS) configurations. If it’s a storefront endpoint, pass the `origin` property storefront options:
Next, in the exported function, retrieve the CORS configurations of your server using the utility functions you imported:

```ts
export default (rootDirectory) => {
//...

const { configModule } = getConfigFile<ConfigModule>(rootDirectory, "medusa-config")
const { projectConfig } = configModule

//....
}
```

Then, create an object that will hold the CORS configurations. If it’s a storefront endpoint, pass the `origin` property storefront options:

```ts
const corsOptions = {
Expand All @@ -71,7 +85,7 @@ const corsOptions = {
}
```

Finally, for each route you add, create an `OPTIONS` request and add `cors` as a middleware for the route:
Finally, for each route you add, create an `OPTIONS` request and add `cors` as a middleware for the route passing it the CORS option:

```ts
router.options("/admin/hello", cors(corsOptions))
Expand Down
21 changes: 17 additions & 4 deletions docs/content/usage/configurations.md
Original file line number Diff line number Diff line change
Expand Up @@ -194,9 +194,22 @@ In a development environment, if this option is not set the default secret is

:::

## Admin CORS
## CORS Configurations

Medusa uses Cross-Origin Resource Sharing (CORS) to only allow specific origins to access the server. To make sure your Admin dashboard can access the Medusa server’s admin endpoints, set this configuration:
Medusa uses Cross-Origin Resource Sharing (CORS) to only allow specific origins to access the server.

The Admin and the Storefront have different CORS configurations that must be configured.

### Accepted Patterns

For both of the Admin and the Storefront CORS configurations, the value is expected to be a string. This string can be a comma-separated list of accepted origins. Every origin in that list can be of the following types:

1. The accepted origin as is. For example, `http://localhost:8000`.
2. A regular expression pattern that can match more than one origin. For example, `*.example.com`. The regex pattern that the server tests for is `^([\/~@;%#'])(.*?)\1([gimsuy]*)$`.

### Admin CORS

To make sure your Admin dashboard can access the Medusa server’s admin endpoints, set this configuration:

```jsx
module.exports = {
Expand All @@ -223,9 +236,9 @@ Make sure that the URL is without a backslash at the end. For example, you shoul

:::

## Storefront CORS
### Storefront CORS

Medusa uses CORS to only allow specific origins to access the server. To make sure your Storefront dashboard can access the Medusa server, set this configuration:
To make sure your Storefront dashboard can access the Medusa server, set this configuration:

```jsx
module.exports = {
Expand Down