What is CORS?

CORS (Cross-Origin Resource Sharing) is a security feature implemented by web browsers to control how web pages in one domain can request resources from a different domain. It prevents malicious websites from accessing data from other sites without permission.

Why CORS Matters

When your frontend application (e.g., localhost:3000) tries to call an API on a different origin (e.g., mockapibuilder.io/api/your-project), the browser blocks the request by default unless the API server explicitly allows it.

Example: A React app running on http://localhost:3000 making a fetch request to https://mockapibuilder.io/api/your-project/users is a cross-origin request.

Security

Prevents unauthorized access to APIs from untrusted websites

Cross-Domain

Enables controlled data sharing between different origins

Browser-Level

Enforced by browsers, not by servers or backend code

CORS in Mock API Builder

Good News: CORS is Automatically Configured!

Mock API Builder automatically handles CORS for you. All mock APIs are configured to accept requests from any origin, so you can focus on development without CORS headaches.

Default CORS Headers

Every response from Mock API Builder includes these CORS headers:

Access-Control-Allow-Origin: *

Allows requests from any domain (localhost, your-site.com, etc.)

Access-Control-Allow-Methods: GET, POST, PUT, PATCH, DELETE, OPTIONS

Permits all standard HTTP methods

Access-Control-Allow-Headers: Content-Type, Authorization

Allows common headers like authentication tokens and content types

Access-Control-Max-Age: 86400

Browsers can cache preflight requests for 24 hours

How CORS Works

Simple Requests

For simple GET requests, the browser sends the request and checks the response headers:

1. Browser sends request:

http

2. Server responds with CORS headers:

json

3. Browser allows the response:

javascript

Preflight Requests

For complex requests (POST, PUT, DELETE, or custom headers), browsers send a preflight OPTIONS request first:

1. Browser sends OPTIONS preflight:

plaintext

2. Server responds with permissions:

http

3. Browser sends actual request:

http

Note: Mock API Builder automatically responds to OPTIONS requests, so preflight checks always succeed.

Testing CORS

From Your Local Development Environment

React Example (localhost:3000):

javascript

With Authentication Header:

javascript

Browser DevTools CORS Debugging

Open your browser's DevTools to inspect CORS headers:

Open DevTools (F12 or Cmd+Option+I)
Go to the Network tab
Make a request to your mock API
Click on the request in the Network tab
Look at the Response Headers section
Verify Access-Control-Allow-Origin is present

Response Headers:
access-control-allow-origin: *
access-control-allow-methods: GET, POST, PUT, PATCH, DELETE, OPTIONS
access-control-allow-headers: Content-Type, Authorization
content-type: application/json

Common CORS Issues & Solutions

Issue: "No 'Access-Control-Allow-Origin' header"

Error Message:

plaintext

Solution:

Verify you're using the correct Mock API Builder URL
Check that the API endpoint exists and is accessible
Ensure you're not behind a corporate proxy blocking CORS headers
Try the request in Postman to verify the endpoint works

Issue: Preflight Request Fails (OPTIONS)

Symptoms: POST/PUT/DELETE requests fail, but GET works

Solution:

Mock API Builder automatically handles OPTIONS requests
Check if you're using custom headers that aren't in the allowed list
Verify you're sending Content-Type: application/json
Clear browser cache and try again

Issue: Works in Postman but not in Browser

Explanation: CORS is a browser security feature. API clients like Postman bypass CORS entirely.

Solution:

This is expected behavior—CORS only applies to browsers
Test in an actual browser environment to verify CORS
Use browser DevTools Network tab to inspect CORS headers
Remember: Mock API Builder has permissive CORS by default

Issue: Credentials Not Included

When: You need to send cookies or authentication with requests

Solution: Add credentials option to fetch:

plaintext

Note: Mock API Builder uses token-based auth (not cookies), so credentials are typically not needed.

Production API Considerations

When Moving to Production

Mock API Builder uses permissive CORS (*) for development convenience. When building your real production API, you should be more restrictive:

✓ Specify Allowed Origins

plaintext

Instead of *, specify your actual domain(s)

✓ Limit HTTP Methods

plaintext

Only allow methods your API actually uses

✓ Restrict Headers

plaintext

Only allow headers you need

✓ Enable Credentials Carefully

plaintext

Only if you need to send cookies/credentials (cannot use with * origin)

Best Practices

✓Don't worry about CORS during development with Mock API Builder—it's already configured
✓Use browser DevTools Network tab to inspect CORS headers when debugging
✓Test in an actual browser not just Postman to verify CORS behavior
✓Remember CORS is browser-enforced backend/server requests bypass CORS
✓Plan for production CORS your real API should be more restrictive than *
✓Use HTTPS in production mixed content (HTTP/HTTPS) can cause CORS issues
✓Document your CORS requirements when sharing mock APIs with your team

What is CORS?

Why CORS Matters

Example: A React app running on http://localhost:3000 making a fetch request to https://mockapibuilder.io/api/your-project/users is a cross-origin request.

Security

Prevents unauthorized access to APIs from untrusted websites

Cross-Domain

Enables controlled data sharing between different origins

Browser-Level

Enforced by browsers, not by servers or backend code

CORS in Mock API Builder

Good News: CORS is Automatically Configured!

Mock API Builder automatically handles CORS for you. All mock APIs are configured to accept requests from any origin, so you can focus on development without CORS headaches.

Default CORS Headers

Every response from Mock API Builder includes these CORS headers:

Access-Control-Allow-Origin: *

Allows requests from any domain (localhost, your-site.com, etc.)

Access-Control-Allow-Methods: GET, POST, PUT, PATCH, DELETE, OPTIONS

Permits all standard HTTP methods

Access-Control-Allow-Headers: Content-Type, Authorization

Allows common headers like authentication tokens and content types

Access-Control-Max-Age: 86400

Browsers can cache preflight requests for 24 hours

How CORS Works

Simple Requests

For simple GET requests, the browser sends the request and checks the response headers:

1. Browser sends request:

http

2. Server responds with CORS headers:

json

3. Browser allows the response:

javascript

Preflight Requests

For complex requests (POST, PUT, DELETE, or custom headers), browsers send a preflight OPTIONS request first:

1. Browser sends OPTIONS preflight:

plaintext

2. Server responds with permissions:

http

3. Browser sends actual request:

http

Note: Mock API Builder automatically responds to OPTIONS requests, so preflight checks always succeed.

Testing CORS

From Your Local Development Environment

React Example (localhost:3000):

javascript

With Authentication Header:

javascript

Browser DevTools CORS Debugging

Open your browser's DevTools to inspect CORS headers:

Open DevTools (F12 or Cmd+Option+I)
Go to the Network tab
Make a request to your mock API
Click on the request in the Network tab
Look at the Response Headers section
Verify Access-Control-Allow-Origin is present

Common CORS Issues & Solutions

Issue: "No 'Access-Control-Allow-Origin' header"

Error Message:

plaintext

Solution:

Verify you're using the correct Mock API Builder URL
Check that the API endpoint exists and is accessible
Ensure you're not behind a corporate proxy blocking CORS headers
Try the request in Postman to verify the endpoint works

Issue: Preflight Request Fails (OPTIONS)

Symptoms: POST/PUT/DELETE requests fail, but GET works

Solution:

Mock API Builder automatically handles OPTIONS requests
Check if you're using custom headers that aren't in the allowed list
Verify you're sending Content-Type: application/json
Clear browser cache and try again

Issue: Works in Postman but not in Browser

Explanation: CORS is a browser security feature. API clients like Postman bypass CORS entirely.

Solution:

This is expected behavior—CORS only applies to browsers
Test in an actual browser environment to verify CORS
Use browser DevTools Network tab to inspect CORS headers
Remember: Mock API Builder has permissive CORS by default

Issue: Credentials Not Included

When: You need to send cookies or authentication with requests

Solution: Add credentials option to fetch:

plaintext

Note: Mock API Builder uses token-based auth (not cookies), so credentials are typically not needed.

Production API Considerations

When Moving to Production

Mock API Builder uses permissive CORS (*) for development convenience. When building your real production API, you should be more restrictive:

✓ Specify Allowed Origins

plaintext

Instead of *, specify your actual domain(s)

✓ Limit HTTP Methods

plaintext

Only allow methods your API actually uses

✓ Restrict Headers

plaintext

Only allow headers you need

✓ Enable Credentials Carefully

plaintext

Only if you need to send cookies/credentials (cannot use with * origin)

Best Practices

✓Don't worry about CORS during development with Mock API Builder—it's already configured
✓Use browser DevTools Network tab to inspect CORS headers when debugging
✓Test in an actual browser not just Postman to verify CORS behavior
✓Remember CORS is browser-enforced backend/server requests bypass CORS
✓Plan for production CORS your real API should be more restrictive than *
✓Use HTTPS in production mixed content (HTTP/HTTPS) can cause CORS issues
✓Document your CORS requirements when sharing mock APIs with your team

CORS Configuration

What is CORS?

CORS in Mock API Builder

Good News: CORS is Automatically Configured!

How CORS Works

1. Browser sends request:

2. Server responds with CORS headers:

3. Browser allows the response:

1. Browser sends OPTIONS preflight:

2. Server responds with permissions:

3. Browser sends actual request:

Testing CORS

React Example (localhost:3000):

With Authentication Header:

Common CORS Issues & Solutions

Production API Considerations

✓ Specify Allowed Origins

✓ Limit HTTP Methods

✓ Restrict Headers

✓ Enable Credentials Carefully

Best Practices

CORS Configuration

What is CORS?

CORS in Mock API Builder

Good News: CORS is Automatically Configured!

How CORS Works

1. Browser sends request:

2. Server responds with CORS headers:

3. Browser allows the response:

1. Browser sends OPTIONS preflight:

2. Server responds with permissions:

3. Browser sends actual request:

Testing CORS

React Example (localhost:3000):

With Authentication Header:

Common CORS Issues & Solutions

Production API Considerations

✓ Specify Allowed Origins

✓ Limit HTTP Methods

✓ Restrict Headers

✓ Enable Credentials Carefully

Best Practices