# CORS Policy

## Overview

The CORS policy, or Cross-Origin Resource Sharing policy, is a security feature in web browsers that controls how resources from one origin (like a website) can be accessed by another origin. This means that when you load a web page from a server, all subsequent resources must be loaded only from that same server, including the protocol (http/https) and server name.

Sometimes, the CORS policy prevents a connected API from transferring data when you test your project in the web preview or publish it as a web app.

## Confirm the Cause

If it appears as though your API connection isn't working when you test your project in the web preview or publish it as a web app, do the following:

1. Open your project's web app.
2. Check your [browser console](https://developers.google.com/web/tools/chrome-devtools/open) for errors.
3. The following error indicates a CORS policy blockage:\
   "Access to fetch at \[URL] from origin ‘[https://x.thunkable.com](https://x.thunkable.com/)’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled."

## Native Mobile Apps

The CORS policy impacts web apps viewed in a browser but not native mobile apps. This is why the exact same set of blocks works on mobile devices and not on web apps.

{% hint style="success" %}
Because the CORS policy does not impact mobile apps, we recommend testing your app using Thunkable Live or downloading or publishing it.
{% endhint %}

## Work Arounds

### CORS Policy Blockers

Several browser extensions can disable the CORS policy, which might work in your case. However, we do not recommend this method for the following reasons:

* You are more vulnerable to attacks.
* While this might work while you are developing your app, if you want to send it to users, they will also have to install the extension.

### Proxy

Another technique is to use a proxy, a server between your web app and the third-party API server, to make calls for you. Some Thunkable Community members use [Xano](https://www.xano.com/) as a proxy.

You may also find this tutorial by a Thunkable Community member helpful: [Create Your Own Web API Service Using Firebase Functions and NodeJS](https://community.thunkable.com/t/create-your-own-web-api-service-using-firebase-functions-and-nodejs/1040762?u=jane).


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.thunkable.com/blocks/advanced-app-features/web-api/cors-policy.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.