How to Handle Cross-Origin Requests in Retool

1// Typical CORS error message in browser console:
2// Access to fetch at 'https://api.example.com/v1/data'
3// from origin 'https://your-company.retool.com'
4// has been blocked by CORS policy:
5// No 'Access-Control-Allow-Origin' header is present
6// on the requested resource.
7
8// Also look for:
9// 'has been blocked by CORS policy: Response to preflight
10// request doesn't pass access control check'
11// This means the OPTIONS preflight request also failed

1// BEFORE: fetch() in JS Query — CORS error
2try {
3  const response = await fetch('https://api.example.com/v1/users', {
4    headers: { 'Authorization': 'Bearer my-api-key' }
5  });
6  const data = await response.json();
7  return data;
8} catch (err) {
9  console.error('CORS error:', err); // Fails with CORS
10}
11
12// AFTER: Resource query — no CORS issue
13// Create a Resource Query with:
14//   Resource: example_api (the REST resource you created)
15//   Method: GET
16//   URL: /v1/users  (relative to resource base URL)
17//   Headers: (auth configured in resource settings)
18
19// Then trigger from JS Query if needed:
20await getUsers.trigger(); // Runs server-side
21console.log(getUsers.data); // No CORS

1// Resource query configuration:
2// Resource: stripe_api
3// Method: POST
4// URL: /v1/payment_intents
5// Body (JSON):
6{
7  "amount": {{ amountInput.value * 100 }},
8  "currency": {{ currencySelect.value || 'usd' }},
9  "customer": {{ table1.selectedRow.data.stripe_customer_id }},
10  "description": {{ descriptionInput.value }},
11  "metadata": {
12    "order_id": {{ orderIdInput.value }},
13    "created_by": {{ current_user.email }}
14  }
15}
16
17// Dynamic URL path (for GET /v1/customers/{id}):
18// URL: /v1/customers/{{ table1.selectedRow.data.stripe_id }}
19
20// Query params (for GET /v1/invoices?customer=cus_xxx&limit=10):
21// URL: /v1/invoices
22// Params: customer={{ table1.selectedRow.data.stripe_id }}, limit=10

1// AWS S3 CORS configuration (JSON format)
2// Add via AWS Console: S3 Bucket → Permissions → CORS configuration
3[
4  {
5    "AllowedHeaders": ["*"],
6    "AllowedMethods": ["GET", "PUT", "POST", "DELETE", "HEAD"],
7    "AllowedOrigins": [
8      "https://your-company.retool.com",
9      "https://your-custom-retool-domain.com"
10    ],
11    "ExposeHeaders": ["ETag", "x-amz-server-side-encryption"],
12    "MaxAgeSeconds": 3000
13  }
14]
15
16// For self-hosted Retool, also allow localhost:
17// "AllowedOrigins": ["https://retool.company.com", "http://localhost:3000"]

1// Check if an API supports CORS before using fetch():
2// Run this in a JS Query to test:
3try {
4  const response = await fetch('https://api.example.com/health', {
5    method: 'HEAD'
6  });
7  console.log('CORS headers:');
8  console.log('Allow-Origin:', response.headers.get('Access-Control-Allow-Origin'));
9  console.log('Allow-Methods:', response.headers.get('Access-Control-Allow-Methods'));
10} catch (err) {
11  console.log('CORS not supported — use resource query instead:', err.message);
12}
13
14// APIs that typically support CORS (safe for fetch()):
15// Public REST APIs with Access-Control-Allow-Origin: *
16// APIs specifically designed for browser use
17
18// APIs that typically do NOT support CORS (use resource query):
19// Payment APIs (Stripe, PayPal)
20// Internal company APIs
21// Most B2B SaaS APIs
22// Any API not explicitly designed for browser requests