Advanced Features

CORS Configuration

Understanding Cross-Origin Resource Sharing and how it works with Mock API Builder

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., api.mockbuilder.com), 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://api.mockbuilder.com/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:

json

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:

  1. Open DevTools (F12 or Cmd+Option+I)
  2. Go to the Network tab
  3. Make a request to your mock API
  4. Click on the request in the Network tab
  5. Look at the Response Headers section
  6. 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
Previous: Testing StrategiesNext: Webhooks