Cross-Origin Resource Sharing (CORS)

What Is Cross-Origin Resource Sharing?

Cross-Origin Resource Sharing, or CORS, is a browser security mechanism that lets a server specify which website origins may read its resources. It relaxes the same-origin policy through HTTP response headers. An origin combines scheme, host, and port, so app.example.com calling api.example.com is cross-origin.

How CORS Works in a Web API

For a web API, the browser checks the server's permission before making response data available to page code.

1. The browser sends a request with an Origin header identifying the calling website.
2. The API checks whether that origin is allowed.
3. The API returns Access-Control-Allow-Origin and, when needed, headers for allowed methods, headers, or credentials.
4. The browser exposes the response to JavaScript only when the policy permits it.

Simple Requests vs Preflight Requests

Some requests proceed directly. Others require an OPTIONS request first.

Benefits of CORS

CORS supports separated frontend and API architectures while retaining browser safeguards.

• Allows a trusted frontend to read data from a separate API domain.
• Supports controlled third-party integrations.
• Lets teams deploy frontend and backend services independently.
• Provides explicit, browser-enforced rules.

CORS Limits and Security Risks

CORS is a sharing policy, not complete access control.

• It does not authenticate users or authorize sensitive actions.
• It does not stop direct API calls outside a browser, so APIs still need server-side authorization.
• It cannot prevent CSRF on its own, especially when cookies are involved.
• Allowing untrusted origins can expose data. A wildcard origin cannot be used with credentialed requests.

How to Fix a CORS Error Safely

A CORS failure usually means the API or proxy did not return the expected permission headers.

1. Inspect the browser console and Network panel for the failed header.
2. Confirm the exact frontend origin, including protocol and port.
3. Configure CORS on the API or reverse proxy, not only in frontend code.
4. Ensure OPTIONS requests receive the required response when preflight applies.
5. Match credential settings on client and server, then test without browser extensions or disabled web security.

CORS Configuration Best Practices

Keep policies narrow and backed by normal API security controls.

• Use an explicit allowlist of trusted origins for each environment.
• Include only necessary methods and request headers.
• Allow local development origins separately from production domains.
• Use appropriate preflight caching and consistent proxy configuration.
• Require authentication and authorization for sensitive endpoints.

CORS When Building with Emergent

When building a full-stack product with an AI web app builder, CORS matters whenever the frontend connects to APIs, authentication services, file storage, or external providers. Planning these boundaries during app design and development helps connected services work reliably without granting unnecessary browser access.