|
1 | | -If you are experiencing connection issues when trying to access your Medusa application from a storefront or the admin dashboard, it is most likely due to Cross-Origin Resource Sharing (CORS) issues. |
| 1 | +If you're experiencing connection issues when trying to access your Medusa application's API routes from the storefront, admin dashboard, or any client application, it's most likely due to a Cross-Origin Resource Sharing (CORS) error. |
2 | 2 |
|
3 | | -You might see a log in your browser console, that looks like this: |
| 3 | +To verify it's a CORS error, check your [browser's console](https://developer.mozilla.org/en-US/docs/Learn_web_development/Howto/Tools_and_setup/What_are_browser_developer_tools). You should see an error similar to the following: |
4 | 4 |
|
5 | | - |
| 5 | +```bash |
| 6 | +Access to fetch at 'http://localhost:9000/store/products' from origin 'http://localhost:8000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. |
| 7 | +``` |
| 8 | +
|
| 9 | +## Why this Error Occurred |
| 10 | +
|
| 11 | +This error occurs when you try to access the Medusa server's API routes from a domain that isn't configured in the application's CORS settings. By default, Medusa only allows requests from specific origins to ensure security. |
| 12 | + |
| 13 | +--- |
| 14 | + |
| 15 | +## How to Fix It |
| 16 | + |
| 17 | +### Verify Your CORS Settings |
| 18 | + |
| 19 | +Medusa has three CORS settings that you can configure in your `medusa-config.ts` file: |
6 | 20 |
|
7 | | -In your `medusa-config.ts`, ensure that you've configured your CORS settings correctly: |
| 21 | +1. [http.storeCors](!docs!/learn/configurations/medusa-config#httpstorecors): Allowed origins for requests to routes starting with `/store`. By default, it's set to `http://localhost:8000` for local development. |
| 22 | +2. [http.adminCors](!docs!/learn/configurations/medusa-config#httpadmincors): Allowed origins for requests to routes starting with `/admin`. By default, it's set to `http://localhost:9000` for local development. |
| 23 | +3. [http.authCors](!docs!/learn/configurations/medusa-config#httpauthcors): Allowed origins for requests to routes starting with `/auth`. By default, it's set to `http://localhost:8000,http://localhost:9000` for local development. |
| 24 | +
|
| 25 | +If your storefront or admin are hosted at different domains or ports, or if you're accessing Medusa's API routes from a different origin (such as an additional storefront), you'll need to update the CORS settings accordingly. You can add additional origins by separating them with commas. |
| 26 | + |
| 27 | +For example, set the following environment variables in your `.env` file or in [Cloud](!cloud!/environments/environment-variables): |
| 28 | + |
| 29 | +```env |
| 30 | +STORE_CORS=http://localhost:8000,http://my-custom-store.com |
| 31 | +ADMIN_CORS=http://localhost:9000,http://my-custom-admin.com |
| 32 | +AUTH_CORS=http://localhost:8000,http://localhost:9000,http://my-custom-store.com,http://my-custom-admin.com |
| 33 | +``` |
| 34 | + |
| 35 | +Then use the environment variables in your `medusa-config.ts` file: |
8 | 36 |
|
9 | 37 | ```ts title="medusa-config.ts" |
10 | 38 | module.exports = defineConfig({ |
11 | 39 | projectConfig: { |
12 | 40 | http: { |
13 | | - storeCors: process.env.STORE_CORS || "http://localhost:8000", |
14 | | - adminCors: process.env.ADMIN_CORS || "http://localhost:9000", |
15 | | - authCors: process.env.AUTH_CORS || "http://localhost:8000,http://localhost:9000", |
| 41 | + storeCors: process.env.STORE_CORS, |
| 42 | + adminCors: process.env.ADMIN_CORS, |
| 43 | + authCors: process.env.AUTH_CORS, |
16 | 44 | }, |
17 | 45 | // ... |
18 | 46 | }, |
19 | 47 | }) |
20 | 48 | ``` |
21 | 49 |
|
22 | | -Learn more about these configurations in [this documentation](!docs!/learn/configurations/medusa-config#http). |
| 50 | +### Apply CORS for Custom Route Prefix |
| 51 | + |
| 52 | +Medusa applies its CORS settings to routes starting with `/store`, `/admin`, and `/auth`. If you've created a route whose path doesn't start with one of these prefixes, you must manually handle CORS for that route. |
| 53 | + |
| 54 | +For example, if you create a custom route at `/custom-routes`, add a middleware to handle CORS for that route: |
| 55 | + |
| 56 | +```ts title="src/api/middlewares.ts" |
| 57 | +import { defineMiddlewares } from "@medusajs/framework/http" |
| 58 | +import type { |
| 59 | + MedusaNextFunction, |
| 60 | + MedusaRequest, |
| 61 | + MedusaResponse, |
| 62 | +} from "@medusajs/framework/http" |
| 63 | +import { ConfigModule } from "@medusajs/framework/types" |
| 64 | +import { parseCorsOrigins } from "@medusajs/framework/utils" |
| 65 | +import cors from "cors" |
| 66 | +
|
| 67 | +export default defineMiddlewares({ |
| 68 | + routes: [ |
| 69 | + { |
| 70 | + matcher: "/custom-routes*", |
| 71 | + middlewares: [ |
| 72 | + ( |
| 73 | + req: MedusaRequest, |
| 74 | + res: MedusaResponse, |
| 75 | + next: MedusaNextFunction |
| 76 | + ) => { |
| 77 | + const configModule: ConfigModule = |
| 78 | + req.scope.resolve("configModule") |
| 79 | +
|
| 80 | + return cors({ |
| 81 | + origin: parseCorsOrigins( |
| 82 | + // Use the appropriate CORS setting for your custom route |
| 83 | + configModule.projectConfig.http.storeCors |
| 84 | + ), |
| 85 | + credentials: true, |
| 86 | + })(req, res, next) |
| 87 | + }, |
| 88 | + ], |
| 89 | + }, |
| 90 | + ], |
| 91 | +}) |
| 92 | +``` |
| 93 | +
|
| 94 | +Make sure to: |
| 95 | +
|
| 96 | +- Update the `matcher` property to match your custom route path. |
| 97 | +- Pass the appropriate CORS setting for your custom route to `parseCorsOrigins`. |
| 98 | +
|
| 99 | +--- |
| 100 | +
|
| 101 | +## Additional Resources |
| 102 | +
|
| 103 | +- [Medusa Configuration Options](!docs!/learn/configurations/medusa-config) |
| 104 | +- [CORS for Custom Routes](!docs!/learn/fundamentals/api-routes/cors#cors-in-custom-routes) |
0 commit comments