Figma Plugin Data Fetcher

This is the full developer documentation for Corsfix Docs # Corsfix Documentation > Learn about Corsfix and how it can help you solve CORS errors. Welcome to the Corsfix documentation! Corsfix is a CORS proxy service that lets you solve CORS error. It works by fetching the target API on your behalf, and returns it to you with the proper CORS headers. ## Key Features [Section titled “Key Features”](#key-features) * Setup in less than one minute * Fetch with any HTTP methods and data types * Send any request headers, without restrictions * Use API keys securely with Secrets * Cache API responses * and more. ## Works Anywhere [Section titled “Works Anywhere”](#works-anywhere) Corsfix works on any platform and any tech framework out there. You can find your specific use case in our [code examples](/docs/code-examples/overview) and [platform integration](/docs/platform/overview). ## Next Steps [Section titled “Next Steps”](#next-steps) Make your first CORS proxy request and learn how to use Corsfix. # Angular > Fix CORS errors in your Angular code using Corsfix CORS proxy. Use this code example for bypassing CORS errors in Angular code with Corsfix CORS proxy. ```typescript import { Component, OnInit } from "@angular/core"; import { HttpClient } from "@angular/common/http"; @Component({ selector: "app-data-display", template: `

Data from API:

`, }) export class DataDisplayComponent implements OnInit { data: any; constructor(private http: HttpClient) {} ngOnInit() { this.http .get("https://proxy.corsfix.com/?https://api.example.com/data") .subscribe((response) => (this.data = response)); } } ``` # Axios > Fix CORS errors in your Axios requests using Corsfix CORS proxy. Use these code examples for bypassing CORS errors in Axios requests with Corsfix CORS proxy. ## GET Request [Section titled “GET Request”](#get-request) ```javascript axios.get("https://proxy.corsfix.com/?https://api.example.com/data"); ``` ## Cached Response [Section titled “Cached Response”](#cached-response) ```js axios.get("https://proxy.corsfix.com/?https://api.example.com/data", { headers: { "x-corsfix-cache": "true", }, }); ``` ## POST Request [Section titled “POST Request”](#post-request) ```js axios.post("https://proxy.corsfix.com/?https://api.example.com/data", { body: JSON.stringify({ data: "mydata", }), }); ``` ## Using Secrets [Section titled “Using Secrets”](#using-secrets) ```js axios.post( "https://proxy.corsfix.com/?" + "https://api.example.com/data?key={{SECRET_KEY}}", { method: "POST", headers: { Authorization: "Bearer {{SECRET_TOKEN}}", }, body: JSON.stringify({ data: "mydata", }), } ); ``` ## Header Override [Section titled “Header Override”](#header-override) ```js axios.get("https://proxy.corsfix.com/?https://api.example.com/data", { headers: { "x-corsfix-headers": JSON.stringify({ "User-Agent": "MyAgent/1.0", }), }, }); ``` # Fetch > Fix CORS errors in your Fetch requests using Corsfix CORS proxy. Use these code examples for bypassing CORS errors in Fetch requests with Corsfix CORS proxy. ## GET Request [Section titled “GET Request”](#get-request) ```javascript fetch("https://proxy.corsfix.com/?https://api.example.com/data"); ``` ## Cached Response [Section titled “Cached Response”](#cached-response) ```js fetch("https://proxy.corsfix.com/?https://api.example.com/data", { headers: { "x-corsfix-cache": "true", }, }); ``` ## POST Request [Section titled “POST Request”](#post-request) ```js fetch("https://proxy.corsfix.com/?https://api.example.com/data", { method: "POST", body: JSON.stringify({ data: "mydata", }), }); ``` ## Using Secrets [Section titled “Using Secrets”](#using-secrets) ```js fetch( "https://proxy.corsfix.com/?" + "https://api.example.com/data?key={{SECRET_KEY}}", { method: "POST", headers: { Authorization: "Bearer {{SECRET_TOKEN}}", }, body: JSON.stringify({ data: "mydata", }), } ); ``` ## Header Override [Section titled “Header Override”](#header-override) ```js fetch("https://proxy.corsfix.com/?https://api.example.com/data", { headers: { "x-corsfix-headers": JSON.stringify({ "User-Agent": "MyAgent/1.0", }), }, }); ``` # Flutter Web > Fix CORS errors in your Flutter Web code using Corsfix CORS proxy. Use this code example for bypassing CORS errors in Flutter Web code with Corsfix CORS proxy. ```dart import 'package:flutter/material.dart'; import 'package:http/http.dart' as http; void main() => runApp(const MyApp()); class MyApp extends StatefulWidget { const MyApp({super.key}); @override State createState() => _MyAppState(); } class _MyAppState extends State { String data = 'Loading...'; @override void initState() { super.initState(); fetchData(); } Future fetchData() async { try { final response = await http.get( Uri.parse('https://proxy.corsfix.com/?https://api.example.com/data'), ); setState(() { data = response.body; }); } catch (e) { setState(() { data = 'Error: $e'; }); } } @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar(title: const Text('CORS Fix Example')), body: Center( child: Text(data), ), ), ); } } ``` # jQuery > Fix CORS errors in your jQuery requests using Corsfix CORS proxy. Use these code examples for bypassing CORS errors in jQuery requests with Corsfix CORS proxy. ## GET Request [Section titled “GET Request”](#get-request) ```js $.ajax({ url: "https://proxy.corsfix.com/?https://api.example.com/data", method: "GET", success: function (response) { console.log(response); }, error: function (xhr) { console.error(xhr); }, }); ``` ## Cached Response [Section titled “Cached Response”](#cached-response) ```js $.ajax({ url: "https://proxy.corsfix.com/?https://api.example.com/data", method: "GET", headers: { "x-corsfix-cache": "true", }, success: function (response) { console.log(response); }, error: function (xhr) { console.error(xhr); }, }); ``` ### POST Request [Section titled “POST Request”](#post-request) ```js $.ajax({ url: "https://proxy.corsfix.com/?https://api.example.com/data", method: "POST", contentType: "application/json", data: JSON.stringify({ data: "mydata", }), success: function (response) { console.log(response); }, error: function (xhr) { console.error(xhr); }, }); ``` ## Using Secrets [Section titled “Using Secrets”](#using-secrets) ```js $.ajax({ url: "https://proxy.corsfix.com/?" + "https://api.example.com/data?key={{SECRET_KEY}}", method: "POST", headers: { Authorization: "Bearer {{SECRET_TOKEN}}", }, contentType: "application/json", data: JSON.stringify({ data: "mydata", }), success: function (response) { console.log(response); }, error: function (xhr) { console.error(xhr); }, }); ``` ## Header Override [Section titled “Header Override”](#header-override) ```js $.ajax({ url: "https://proxy.corsfix.com/?https://api.example.com/data", method: "GET", headers: { "x-corsfix-headers": JSON.stringify({ "User-Agent": "MyAgent/1.0", }), }, success: function (response) { console.log(response); }, error: function (xhr) { console.error(xhr); }, }); ``` # Ky > Fix CORS errors in your Ky requests using Corsfix CORS proxy. Use these code examples for bypassing CORS errors in Ky requests with Corsfix CORS proxy. ## GET Request [Section titled “GET Request”](#get-request) ```javascript ky.get("https://proxy.corsfix.com/?https://api.example.com/data"); ``` ## Cached Response [Section titled “Cached Response”](#cached-response) ```js ky.get("https://proxy.corsfix.com/?https://api.example.com/data", { headers: { "x-corsfix-cache": "true", }, }); ``` ## POST Request [Section titled “POST Request”](#post-request) ```js ky.post("https://proxy.corsfix.com/?https://api.example.com/data", { body: JSON.stringify({ data: "mydata", }), }); ``` ## Using Secrets [Section titled “Using Secrets”](#using-secrets) ```js ky.post( "https://proxy.corsfix.com/?" + "https://api.example.com/data?key={{SECRET_KEY}}", { method: "POST", headers: { Authorization: "Bearer {{SECRET_TOKEN}}", }, body: JSON.stringify({ data: "mydata", }), } ); ``` ## Header Override [Section titled “Header Override”](#header-override) ```js ky.get("https://proxy.corsfix.com/?https://api.example.com/data", { headers: { "x-corsfix-headers": JSON.stringify({ "User-Agent": "MyAgent/1.0", }), }, }); ``` # Code Examples > Find code examples for fixing CORS errors on any tech stack with Corsfix CORS Proxy. Corsfix allows you to fix CORS errors on any framework and any tech stack. Find your tech stack below to start fixing CORS errors in your website: * [Angular](/docs/code-examples/angular) * [Axios](/docs/code-examples/axios) * [Fetch](/docs/code-examples/fetch) * [Flutter Web](/docs/code-examples/flutter-web) * [jQuery](/docs/code-examples/jquery) * [Ky](/docs/code-examples/ky) * [React](/docs/code-examples/react) * [XMLHttpRequest](/docs/code-examples/xhr) # React > Fix CORS errors in your React code using Corsfix CORS proxy. Use this code example for bypassing CORS errors in React code with Corsfix CORS proxy. ```jsx import { useEffect, useState } from "react"; function MyComponent() { const [data, setData] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { fetch("https://proxy.corsfix.com/?https://example.com/api") .then((response) => response.json()) .then((data) => { setData(data); setLoading(false); }); }, []); if (loading) return

; if (error) return

Error: {error.message}

; return (

{JSON.stringify(data, null, 2)}

); } ``` # XMLHttpRequest > Fix CORS errors in your XHR requests using Corsfix CORS proxy. Use these code examples for bypassing CORS errors in XHR requests with Corsfix CORS proxy. ## GET Request [Section titled “GET Request”](#get-request) ```javascript const xhr = new XMLHttpRequest(); xhr.open("GET", "https://proxy.corsfix.com/?", true); xhr.send(); ``` ## Cached Response [Section titled “Cached Response”](#cached-response) ```js const xhr = new XMLHttpRequest(); xhr.open("GET", "https://proxy.corsfix.com/?", true); xhr.setRequestHeader("x-corsfix-cache", "true"); xhr.send(); ``` ## POST Request [Section titled “POST Request”](#post-request) ```js const xhr = new XMLHttpRequest(); xhr.open( "POST", "https://proxy.corsfix.com/?https://api.example.com/data", true ); xhr.setRequestHeader("Content-Type", "application/json"); xhr.send(JSON.stringify({ data: "mydata" })); ``` ## Using Secrets [Section titled “Using Secrets”](#using-secrets) ```js const xhr = new XMLHttpRequest(); xhr.open( "POST", "https://proxy.corsfix.com/?https://api.example.com/data?key={{SECRET_KEY}}", true ); xhr.setRequestHeader("Content-Type", "application/json"); xhr.setRequestHeader("Authorization", "Bearer {{SECRET_TOKEN}}"); xhr.send(JSON.stringify({ data: "mydata" })); ``` ## Header Override [Section titled “Header Override”](#header-override) ```js const xhr = new XMLHttpRequest(); xhr.open("GET", "https://proxy.corsfix.com/?", true); xhr.setRequestHeader( "x-corsfix-headers", JSON.stringify({ Origin: "https://www.google.com", Referer: "https://www.google.com", }) ); xhr.send(); ``` # API > Corsfix CORS Proxy API documentation. Corsfix provides several methods to proxy your requests, giving you flexibility in how you use with the CORS Proxy. ## URL as Query String [Section titled “URL as Query String”](#url-as-query-string) A simple way to use the proxy is by inserting the target URL as query string: ```bash https://proxy.corsfix.com/?https://api.example.com/data # or https://proxy.corsfix.com/?api.example.com/data ``` ### Example Usage [Section titled “Example Usage”](#example-usage) ```javascript fetch("https://proxy.corsfix.com/?https://api.example.com/data") .then((response) => response.json()) .then((data) => console.log(data)); ``` ## URL in Query Parameter (alternative) [Section titled “URL in Query Parameter (alternative)”](#url-in-query-parameter-alternative) You can also use the `url` query parameter to specify your target: ```bash https://proxy.corsfix.com/?url=https://api.example.com/data # or https://proxy.corsfix.com/?url=api.example.com/data ``` ### Example Usage [Section titled “Example Usage”](#example-usage-1) ```javascript fetch("https://proxy.corsfix.com/?url=https://api.example.com/data") .then((response) => response.json()) .then((data) => console.log(data)); ``` ## URL as Path (alternative) [Section titled “URL as Path (alternative)”](#url-as-path-alternative) If you prefer the shortest URL possible, you can insert the target URL directly to the path: ```bash https://proxy.corsfix.com/https://api.example.com/data # or https://proxy.corsfix.com/api.example.com/data ``` ### Example Usage [Section titled “Example Usage”](#example-usage-2) ```javascript fetch("https://proxy.corsfix.com/https://api.example.com/data") .then((response) => response.json()) .then((data) => console.log(data)); ``` ## Request Headers [Section titled “Request Headers”](#request-headers) Corsfix uses the `Origin` header to validate if your application is authorized to use the CORS proxy. This header is automatically set when sending request from the browser, such as when using Fetch, Axios, or etc. ## Response Headers [Section titled “Response Headers”](#response-headers) The proxy automatically adds the following CORS header to the responses: ```plaintext Access-Control-Allow-Origin: Access-Control-Expose-Headers: * ``` ## Timeouts [Section titled “Timeouts”](#timeouts) When a request takes longer than 20 seconds to complete, the proxy will return a `504 Gateway Timeout` response. This status code indicates that the server did not receive a timely response from the target server. ## Payload Size [Section titled “Payload Size”](#payload-size) The maximum payload size for a request is 5MB. If your request exceeds this limit, the proxy will return a `413 Payload Too Large` response. This status code indicates that the request is larger than the allowed size. # Cached Response > Learn how you can utilize the cached response for your CORS proxy request. The cached response feature enables you to cache and reuse responses from the target server, optimizing performance and reducing throughput usage. ## Using x-corsfix-cache [Section titled “Using x-corsfix-cache”](#using-x-corsfix-cache) To use cached response, include the `x-corsfix-cache` header in your request. Example: ```javascript fetch("https://proxy.corsfix.com/?", { headers: { "x-corsfix-cache": "true", }, }); ``` With this, you can: * Cache responses to avoid hitting the target server constantly. * Go beyond your plan throughput capacity, as requests with cached responses do not count towards the throughput capacity. * Improve performance and latency, because the content is served from a global edge CDN around the world. ## Cache Behavior [Section titled “Cache Behavior”](#cache-behavior) For cached responses, we modify the response headers: * Set `Cache-Control` to `public`. * Remove `Expiration` header. This feature is only available for GET requests, with cache TTL fixed at 1 hour. # File Types > Learn all the file types supported by Corsfix. Corsfix doesn’t have any limitations on which file types you can fetch. All plans allow you to fetch any type of file. Here are some common file formats you might work with: ### Documents [Section titled “Documents”](#documents) * PDF (.pdf) * Word Documents (.doc, .docx) * Text Files (.txt) * CSV (.csv) * XML (.xml) ### Images [Section titled “Images”](#images) * JPEG/JPG (.jpg, .jpeg) * PNG (.png) * GIF (.gif) * WebP (.webp) * SVG (.svg) ### Media [Section titled “Media”](#media) * Audio Files (.mp3, .wav, .ogg) * Video Files (.mp4, .webm) ### Web Assets [Section titled “Web Assets”](#web-assets) * JavaScript (.js) * CSS (.css) * HTML (.html) * JSON (.json) * WebAssembly (.wasm) ### Archives [Section titled “Archives”](#archives) * ZIP (.zip) * TAR (.tar) * GZ (.gz) # Header Override > Learn about the Corsfix request headers override feature. The `x-corsfix-headers` request header allows you to override HTTP request headers when making requests through the CORS proxy. This is particularly useful when you need to modify headers that are normally restricted in client-side JavaScript. ## Using x-corsfix-headers [Section titled “Using x-corsfix-headers”](#using-x-corsfix-headers) To override headers, add the `x-corsfix-headers` header to your request header with a JSON-stringified object containing your desired headers. Example: ```js fetch("https://proxy.corsfix.com/?", { headers: { "x-corsfix-headers": JSON.stringify({ Origin: "https://www.google.com", Referer: "https://www.google.com", }), }, }); ``` ## Forbidden Headers [Section titled “Forbidden Headers”](#forbidden-headers) The following normally forbidden headers can be modified using `x-corsfix-headers`: * Referer * Origin * User-Agent * etc. See the [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Glossary/Forbidden_header_name) for a complete list of forbidden headers. # JSONP > Learn how to use Corsfix with JSONP for requests in strict security or constrained environments. JSONP (JSON with Padding) is useful when traditional CORS requests are blocked or unavailable. You will need to use JSONP in these situations: * **Strict Content Security Policy** - When your application’s CSP policy blocks `fetch` or `XMLHttpRequest` but allows script tags * **Null origin environments** - When working in sandboxed environments where origin is null * **Legacy browser support** - When targeting old browsers that don’t support CORS JSONP works by using a ` ``` ### jQuery Example [Section titled “jQuery Example”](#jquery-example) If you’re using jQuery, you can use the `$.getJSON()` method with JSONP: ```javascript $.getJSON( "https://proxy.corsfix.com/?url=https://api.example.com/data&callback=?", function (data) { console.log("Status:", data.status); console.log("Response body:", data.body); // Handle the response if (data.status === 200) { // Process successful response $("#result").html(JSON.stringify(data.body, null, 2)); } else { // Handle error response $("#result").html("Error: " + data.status); } } ); ``` ## Response Format [Section titled “Response Format”](#response-format) The proxy will respond with an object containing the following properties: | Property | Type | Description | | --------- | ------ | ---------------------------------------------------- | | `status` | number | HTTP status code from the target API | | `headers` | object | Response headers with lowercase keys | | `type` | string | Content type: `empty`, `json`, `string`, or `base64` | | `body` | any | The response body (varies by type) | The body type is determined by the target API response, and we handle them as follows: | Type | Description | Body Content | | -------- | ---------------------------------- | ------------------------ | | `empty` | No response body | `null` or empty | | `json` | Valid JSON response | Parsed JavaScript object | | `string` | Text that cannot be parsed as JSON | String value | | `base64` | Binary data (images, files, etc.) | Base64-encoded string | ## Limitations [Section titled “Limitations”](#limitations) JSONP has inherent limitations due to its script-based nature: * **HTTP method restriction** - Only GET requests are supported (no POST, PUT, DELETE, etc.) * **Response size limit** - Target API responses are limited to 1MB * **No caching** - The cached response feature is not supported with JSONP * **Header limitations** - Sending custom request headers is not supported # Quotas > Learn the different usage quotas depending on your Corsfix plan. Depending on your Corsfix plan, you have access to different quotas and allowances. ## Throughput [Section titled “Throughput”](#throughput) Each plan is designed with different throughput capacities to accommodate various usage scenarios. Throughput is measured in requests per minute (RPM) and per IP address. | Plan | RPM (per IP) | | ------ | ------------ | | Hobby | 60 RPM | | Growth | 120 RPM | | Scale | 180 RPM | When exceeding the throughput capacity, users will receive a `429 Too Many Requests` response, which indicates that they have reached the maximum number of requests allowed for their IP address. Each response includes headers that provide information about the status: | Header Name | Description | | --------------------- | --------------------------------------------------------------------- | | X-RateLimit-Limit | The maximum number of requests allowed per minute | | X-RateLimit-Remaining | The number of requests remaining in the current time window | | X-RateLimit-Used | The number of requests used in the current time window | | X-RateLimit-Reset | The time at which the rate limit will reset, in Unix timestamp format | ## Data Transfer [Section titled “Data Transfer”](#data-transfer) Each plan includes a specific monthly data transfer allowance for outbound traffic. Data transfer refers to the amount of data sent from Corsfix servers to your users. | Plan | Monthly Data Transfer | | ------ | --------------------- | | Hobby | 25 GB | | Growth | 100 GB | | Scale | 500 GB | **Important Notes:** * Data transfer quotas apply only to outbound traffic (data sent from Corsfix to your users) * Inbound data transfer (requests sent to Corsfix) is always free and unlimited * You can monitor your current usage and remaining quota on the Metrics page of your dashboard # Region > Corsfix CORS Proxy server regions. Corsfix proxy servers are distributed across the world. When you make a request to the Corsfix proxy, the request will be directed to the closest server to minimize latency. ## Available Regions [Section titled “Available Regions”](#available-regions) The following regions are available for use with the Corsfix CORS Proxy: | Region Code | Location | | ----------- | ------------- | | proxy-ap | Asia Pacific | | proxy-us | North America | | proxy-eu | Europe | ## Default Behavior [Section titled “Default Behavior”](#default-behavior) Under normal circumstances, you only need to call the main proxy server at `https://proxy.corsfix.com`. Request to the proxy will automatically be routed to the closest server based on the users location, providing the best performance and lowest latency. ## Using Region-Specific Endpoints [Section titled “Using Region-Specific Endpoints”](#using-region-specific-endpoints) In case you need to ensure requests originate from a specific region, you can directly call specific proxy server regions: ```plaintext https://proxy-ap.corsfix.com/? // Asia Pacific https://proxy-us.corsfix.com/? // North America https://proxy-eu.corsfix.com/? // Europe ``` ### Example Usage [Section titled “Example Usage”](#example-usage) ```javascript // To make a request from the Asia Pacific region fetch("https://proxy-ap.corsfix.com/?https://api.example.com/data") .then((response) => response.json()) .then((data) => console.log(data)); ``` # Secrets Variable > Use secrets variable to store sensitive information when using Corsfix. The secrets variable feature allows you to store sensitive information, such as API keys or tokens. This is especially useful when you need to make requests that require credentials without exposing them in your frontend code. ## Adding Your Secrets [Section titled “Adding Your Secrets”](#adding-your-secrets) Before using secrets variable, you will need to add your secrets in the dashboard. Follow the [secrets dashboard documentation](/docs/dashboard/secrets) to add your secrets. ## Using Secrets Variable [Section titled “Using Secrets Variable”](#using-secrets-variable) Once you have added your secrets, you can use them in your requests by using your secret name wrapped with double curly braces `{{SECRET_NAME}}`. The secrets variable can be used in the: * Query parameters * Request headers ```js fetch("https://proxy.corsfix.com/?https://domain/?apiKey={{SECRET_NAME}}", { method: "GET", headers: { Authorization: "Bearer {{SECRET_NAME}}", }, }) .then((response) => response.json()) .then((data) => console.log(data)) .catch((error) => console.error(error)); ``` When you make a request with the secrets variable, Corsfix will replace the variable with the value of your secret before proxying the request to the target URL. ## Security [Section titled “Security”](#security) Secrets variables are secure by default. They are secured at rest using layered encryption. The decryption process is done in memory only when the request using the secret is made, ensuring your sensitive information remains protected throughout the process. # Application > Learn more about managing your applications in Corsfix dashboard. Once you’re ready to use Corsfix in production, you’ll need to add it in the dashboard. This guide will help you understand how to set up and configure your application. ## Adding a New Application [Section titled “Adding a New Application”](#adding-a-new-application) To add a new application, you’ll need to configure two values: ### Origin Domains [Section titled “Origin Domains”](#origin-domains) This setting controls which domains can use Corsfix proxy. This is where you put your website’s domain. For example: * `myapp.com` * `www.myapp.com` * `web.myapp.com` ![Origin Domains](https://assets.corsfix.com/iswiipc.png) ### Target Domains [Section titled “Target Domains”](#target-domains) This value consists of the domains you want to fetch to. By default it is set to **All domains**, however you can select specific domains for more control. For example: * `example.com` * `api.external.com` ![Target Domains](https://assets.corsfix.com/7wvwey8j.png) ## Security [Section titled “Security”](#security) Corsfix validates requests based on the Origin header and target domain, ensuring only legitimate requests are processed. For enhanced security, both origin and target domains use exact matching. For example, these are considered distinct domains that must be added separately: * `mywebsite.com` * `www.mywebsite.com` * `app.mywebsite.com` To accommodate this, we support adding multiple origin domains for each application. We don’t use API keys since they would be exposed in client-side code, compromising security. # Secrets > Learn more about managing your secrets in Corsfix dashboard. Before using secrets variables, you need to add your secrets in the dashboard. This guide will help you understand how to set up and manage your secrets. ## Adding a Secret [Section titled “Adding a Secret”](#adding-a-secret) A secret is tied to an application, and only applications with access to that secret can use its value. To add a secret, you’ll need to configure three values: * **Secret Name**: Must be unique and can only contain alphanumeric characters and underscores * **Secret Value**: Can be any string (API keys, tokens, etc.) Once you add your secret, you won’t be able to see the complete value again for security reasons, so make sure to store it somewhere safe if needed. ## Updating a Secret [Section titled “Updating a Secret”](#updating-a-secret) You have the option to update your secret’s name and value after you add it. You can: * Leave the secret value empty if you want to keep the existing value * Input a new value to update the secret * Update the name when needed ## Keeping Your Secrets Safe [Section titled “Keeping Your Secrets Safe”](#keeping-your-secrets-safe) Security of your secrets is a shared responsibility between Corsfix and you as a user. **What Corsfix does:** * Encrypts your secrets at rest using layered encryption * Performs decryption safely in memory only when processing the request * Never logs or stores decrypted secret values **What you should do:** * Specify allowed domains for your application instead of using wildcard domains (`*`), in order to prevent your secrets from being exposed to unauthorized domains When you make a request with a secrets variable, Corsfix will replace the variable with the actual value of your secret before proxying the request to the target URL. If you configure an application with all domains allowed, a warning will appear in the dashboard to remind you of the potential security implications. # Free Tier > Learn how you can try Corsfix for free to quickly integrate your website. Our free offerings are designed you so you can quickly use Corsfix with your website. ## Development [Section titled “Development”](#development) You can instantly use our proxy in your local development environment (localhost). * No registration required * Use in local domains (`localhost`, `127.0.0.1`, `192.168.x.x`, `0.0.0.0`) * 60 requests per minute ## Production (Trial) [Section titled “Production (Trial)”](#production-trial) Try Corsfix for a limited time on your live website, all features included. * Try all the features for free * 1 GB data transfer and 3 web apps included * 60 requests per minute Get started by adding your website in the [dashboard](https://app.corsfix.com/applications) and upgrade to keep using Corsfix on your website. # Getting Started > Get started with using Corsfix CORS proxy to bypass CORS errors. Note Make sure to add your domain in the [dashboard](https://app.corsfix.com/applications) to use Corsfix on live websites.\ For local websites (localhost), you can use Corsfix without any setup. To use Corsfix, add `https://proxy.corsfix.com/?` before your URL when making fetch requests. ## Basic Usage [Section titled “Basic Usage”](#basic-usage) ```javascript // Instead of direct fetch fetch("https://api.example.com/data"); /* Add Corsfix URL before the API https://proxy.corsfix.com/? + https://api.example.com/data */ fetch("https://proxy.corsfix.com/?https://api.example.com/data"); ``` ## Example [Section titled “Example”](#example) ```javascript // GET request fetch("https://proxy.corsfix.com/?https://api.example.com/users") .then((response) => response.json()) .then((data) => console.log(data)); // POST request fetch("https://proxy.corsfix.com/?https://api.example.com/users", { method: "POST", body: JSON.stringify({ name: "John" }), headers: { "Content-Type": "application/json", }, }); ``` # Self-Hosting > Run Corsfix CORS proxy on your own infrastructure for complete control over your data. Corsfix is open source, meaning you can run it on your own infrastructure for complete control over your data. ## Prerequisites [Section titled “Prerequisites”](#prerequisites) Before getting started, ensure you have: * A VPS or dedicated server * Docker and Docker Compose installed * A domain name (optional, but recommended for production) * Basic knowledge of Docker and command line operations ## Installation Steps [Section titled “Installation Steps”](#installation-steps) ### 1. Install Docker [Section titled “1. Install Docker”](#1-install-docker) Install Docker on your machine by following the official installation guide: * **macOS**: * **Windows**: * **Linux**: Verify Docker installation: ```bash docker --version docker compose --version ``` ### 2. Clone the Repository [Section titled “2. Clone the Repository”](#2-clone-the-repository) Clone the [Corsfix repository](https://github.com/corsfix/corsfix) to your server: ```bash git clone https://github.com/corsfix/corsfix.git cd corsfix ``` ### 3. Configure Environment Variables [Section titled “3. Configure Environment Variables”](#3-configure-environment-variables) Copy the example environment file and customize it: ```bash cp .env.example .env ``` Edit the `.env` file with your preferred text editor: ```bash nano .env ``` Configure the following variables: ```bash # Database credentials MONGODB_USER=proxy MONGODB_PASSWORD=your_secure_mongodb_password # Redis password REDIS_PASSWORD=your_secure_redis_password # Generate these encryption keys using OpenSSL KEK_VERSION_1=your_32_char_base64_key AUTH_SECRET=your_32_char_base64_key # Your domain (use localhost for local development) DOMAIN=yourdomain.com ``` Generate secure encryption keys: ```bash # Generate KEK_VERSION_1 openssl rand -base64 32 # Generate AUTH_SECRET openssl rand -base64 32 ``` ### 4. Start the Services [Section titled “4. Start the Services”](#4-start-the-services) Launch all Corsfix services using Docker Compose: ```bash docker compose -f prod.yaml --env-file .env up -d ``` This command will: * Pull the latest Corsfix images from GitHub Container Registry * Start MongoDB, Redis, the dashboard app, proxy service, and Caddy reverse proxy * Run all services in the background Verify all services are running: ```bash docker compose -f prod.yaml ps ``` ### 5. Access the Dashboard [Section titled “5. Access the Dashboard”](#5-access-the-dashboard) Once all services are up and running: * **Dashboard**: `https://app.yourdomain.com` (or `http://app.localhost` for local setup) * **Proxy**: `https://proxy.yourdomain.com` (or `http://proxy.localhost` for local setup) ### 6. Create Your Account [Section titled “6. Create Your Account”](#6-create-your-account) 1. Navigate to the dashboard URL in your browser 2. Create a new account using your email and a secure password 3. Add your websites to the allowlist in the dashboard ### 7. Test the Proxy [Section titled “7. Test the Proxy”](#7-test-the-proxy) Test your CORS proxy by making a request through your proxy domain: ```bash # Example using curl curl -X GET "https://proxy.yourdomain.com/?https://api.example.com/data" \ -H "Origin: https://yourwebsite.com" ``` Or test in JavaScript: ```javascript fetch("https://proxy.yourdomain.com/?https://api.example.com/data") .then((response) => response.json()) .then((data) => console.log(data)); ``` ## Managing Your Installation [Section titled “Managing Your Installation”](#managing-your-installation) ### View Logs [Section titled “View Logs”](#view-logs) Monitor service logs: ```bash # View all logs docker compose -f prod.yaml logs -f # View specific service logs docker compose -f prod.yaml logs -f app docker compose -f prod.yaml logs -f proxy ``` ### Update to Latest Version [Section titled “Update to Latest Version”](#update-to-latest-version) Pull the latest images and restart services: ```bash docker compose -f prod.yaml pull docker compose -f prod.yaml --env-file .env up -d ``` ### Stop Services [Section titled “Stop Services”](#stop-services) Stop all services: ```bash docker compose -f prod.yaml down ``` ## Domain Configuration [Section titled “Domain Configuration”](#domain-configuration) For production deployments with a custom domain: 1. Point your domain’s A records to your server’s IP address: * `app.yourdomain.com` → Your server IP * `proxy.yourdomain.com` → Your server IP 2. Caddy will automatically handle SSL certificate generation via Let’s Encrypt 3. Update your `.env` file with your domain: ```bash DOMAIN=yourdomain.com ``` ## Docker Images [Section titled “Docker Images”](#docker-images) The official Corsfix Docker images are available on GitHub Container Registry and Docker Hub: * **Dashboard App**: [GitHub Container Registry](https://ghcr.io/corsfix/corsfix-app) | [Docker Hub](https://hub.docker.com/r/corsfix/corsfix-app) * **Proxy Service**: [GitHub Container Registry](https://ghcr.io/corsfix/corsfix-proxy) | [Docker Hub](https://hub.docker.com/r/corsfix/corsfix-proxy) You can pull the images directly: ```bash docker pull ghcr.io/corsfix/app:latest docker pull ghcr.io/corsfix/proxy:latest ``` ## Getting Help [Section titled “Getting Help”](#getting-help) For additional support and community discussion, join our Discord server at: *** Congratulations! You’ve successfully deployed Corsfix on your own infrastructure. # Sponsorship > Learn how your open source project can get a CORS proxy sponsorship by Corsfix. We believe in supporting the open source community. If you’re maintaining an open source project, you may be eligible to use our CORS proxy service for free. You will get access equivalent to one of our [premium plans](/pricing) for your account. ## How to Apply [Section titled “How to Apply”](#how-to-apply) To apply for the open source sponsorship, please visit our [GitHub repository](https://github.com/corsfix/free-cors-proxy). # Cloudflare Pages > Fix CORS errors in Cloudflare Pages with Corsfix when calling external APIs from your website. Cloudflare Pages is a JAMstack platform for frontend developers to collaborate and deploy websites. When building static sites or single-page applications on Cloudflare Pages, you might encounter CORS errors when trying to access external APIs directly from your frontend code. In this guide, we’ll fix CORS errors in Cloudflare Pages using Corsfix, a secure proxy service that enables your application to communicate with any API without CORS restrictions. ## Fix CORS error [Section titled “Fix CORS error”](#fix-cors-error) ### 1. Deploy Your Project to Cloudflare Pages [Section titled “1. Deploy Your Project to Cloudflare Pages”](#1-deploy-your-project-to-cloudflare-pages) Begin by deploying your application to Cloudflare Pages through their standard deployment workflow. Once your deployment is complete, you can find your live application URL in the Cloudflare Pages dashboard. ![Cloudflare Pages Deployment URL](https://assets.corsfix.com/fe8x7g4k.png) *Find your live application URL in the Cloudflare Pages project dashboard* Make note of this URL as you’ll need it to configure Corsfix in the next step. ### 2. Configure Your Application in Corsfix [Section titled “2. Configure Your Application in Corsfix”](#2-configure-your-application-in-corsfix) Head over to the [Corsfix application dashboard](https://app.corsfix.com) and add your Cloudflare Pages deployment URL as an origin domain for API requests. ![Adding origin domain](https://assets.corsfix.com/8bna8zej.png) *Add your origin domain the Corsfix dashboard* After adding your domain to the origin domains, your API requests through Corsfix will function properly in your deployed application. ### 3. Verify Your API Integration [Section titled “3. Verify Your API Integration”](#3-verify-your-api-integration) Once the configuration is complete, open your live Cloudflare Pages application and test your API functionality. Your requests should now flow through the Corsfix proxy without any CORS-related issues. ![Successful API Request](https://assets.corsfix.com/qc6o6v9.png) *API requests now work seamlessly without CORS errors* Check your browser’s developer console to confirm that CORS errors are eliminated and your API calls are executing successfully. ## Custom Domains [Section titled “Custom Domains”](#custom-domains) If you’ve configured a custom domain for your Cloudflare Pages site, ensure you add your custom domain (e.g., `yourdomain.com`) to the origin domains in the Corsfix dashboard rather than using the default Cloudflare Pages URL. # Figma Plugin > Use Corsfix in your Figma plugin to make API requests without CORS error. Figma plugins run in a sandboxed environment with strict security restrictions. When you try to call the Corsfix proxy API (or any API) directly from a Figma plugin, you’ll encounter an error related to a “null origin”. To work around this limitation, we need to use what Figma calls a [“non-null origin” iframes](https://www.figma.com/plugin-docs/creating-ui/#non-null-origin-iframes). ## Setting Up a Non-null Origin Webpage [Section titled “Setting Up a Non-null Origin Webpage”](#setting-up-a-non-null-origin-webpage) Create a simple HTML (index.html) file that will be hosted on a web server. This page will use Corsfix to make the API request and then send the data back to your Figma plugin. ```html Figma Plugin Data Fetcher ``` Host this file on a static website hosting service (like GitHub Pages, Netlify, Vercel, etc.), then add it to your [application origin domains](/docs/dashboard/application) via the dashboard. You can also work locally when developing your plugin, see the [Development Environment](#development-environment) section for more details. ## Configuring Your Figma Plugin [Section titled “Configuring Your Figma Plugin”](#configuring-your-figma-plugin) ### Manifest File Configuration [Section titled “Manifest File Configuration”](#manifest-file-configuration) Add your webpage domain to the allowed domains in your plugin’s manifest.json file: ```json { "name": "Your Plugin Name", "id": "your-plugin-id", "api": "1.0.0", "main": "code.js", "editorType": ["figma"], "networkAccess": { "allowedDomains": ["https://your-webpage-domain.com"] } } ``` ### Plugin Code [Section titled “Plugin Code”](#plugin-code) In your plugin’s main code, load the webpage and listen for messages: ```typescript // Show the UI with your hosted webpage figma.showUI( '' ); // Listen for messages from the UI figma.ui.onmessage = async (msg) => { if (msg.type === "fetch-result") { // Handle the successful response console.log("Data received:", msg.data); // Do something with the data in your plugin // For example, create text nodes with the data: await figma.loadFontAsync({ family: "Inter", style: "Regular" }); const textNode = figma.createText(); textNode.characters = JSON.stringify(msg.data, null, 2); textNode.x = 100; textNode.y = 100; figma.currentPage.appendChild(textNode); // Optional: close the plugin when done figma.closePlugin(); } else if (msg.type === "fetch-error") { // Handle errors console.error("Error fetching data:", msg.error); figma.notify(`Error: ${msg.error}`); } }; ``` ## Additional Information [Section titled “Additional Information”](#additional-information) ### Hiding the UI [Section titled “Hiding the UI”](#hiding-the-ui) If you don’t want users to see the UI frame, you can hide it when showing the UI: ```typescript figma.showUI( ``, { visible: false, } ); ``` ### Development Environment [Section titled “Development Environment”](#development-environment) During development, Figma allows you to use localhost as an allowed domain. Add the local domain to your manifest: ```json { "networkAccess": { "allowedDomains": ["https://your-webpage-domain.com"], "devAllowedDomains": ["http://localhost:5500"] } } ``` This allows you to test your plugin with a locally hosted webpage before deployment, and you can utilize Corsfix’s free tier for local development. To serve your HTML file locally, you can use Visual Studio Code with the [Live Server extension](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) or any similar local development server. Just make sure to update the URL in your plugin code to point to your local server (e.g., `http://localhost:5500/index.html`). ## Sample Repository [Section titled “Sample Repository”](#sample-repository) Check out our sample repository . It provides example code showing how to implement the techniques described in this guide that you can adapt for your own Figma plugins. # Firebase Hosting > Fix CORS errors in Firebase Hosting with Corsfix when calling external APIs from your website. Firebase Hosting is Google’s web hosting platform for static sites and progressive web apps. When calling external APIs directly from your Firebase-hosted application, you may encounter CORS errors since many APIs only accept requests from server environments. In this guide, we’ll fix CORS errors in Firebase Hosting using Corsfix, a secure proxy service that enables your application to communicate with any API without CORS restrictions. ## Fix CORS error [Section titled “Fix CORS error”](#fix-cors-error) ### 1. Deploy Your Application to Firebase Hosting [Section titled “1. Deploy Your Application to Firebase Hosting”](#1-deploy-your-application-to-firebase-hosting) Start by deploying your project to Firebase Hosting using the Firebase CLI or your preferred deployment method. After deployment completes, you can access your live application URL from the Firebase Console under the Hosting tab. ![Firebase Hosting Deployment URL](https://assets.corsfix.com/e7uxkoz.png) *Access your live application URL from the Firebase Console Hosting section* Keep this URL handy as you’ll need it for configuring Corsfix in the upcoming step. ### 2. Set Up Your Application in Corsfix [Section titled “2. Set Up Your Application in Corsfix”](#2-set-up-your-application-in-corsfix) Go to the [Corsfix application dashboard](https://app.corsfix.com) and register your Firebase Hosting deployment URL as an origin domain for API requests. ![Adding origin domain](https://assets.corsfix.com/8bna8zej.png) *Add your origin domain the Corsfix dashboard* Once you’ve configured your domain as an origin domain, your API requests through Corsfix will operate correctly in your deployed application. ### 3. Test Your API Integration [Section titled “3. Test Your API Integration”](#3-test-your-api-integration) With the setup complete, navigate to your live Firebase Hosting application and test your API functionality. Your requests should now route through the Corsfix proxy without encountering any CORS restrictions. ![Successful API Request](https://assets.corsfix.com/pys9md3j.png) *API requests now function properly without CORS errors* Open your browser’s developer tools to verify that CORS errors have been resolved and your API calls are completing as intended. ## Custom Domains [Section titled “Custom Domains”](#custom-domains) If you’ve connected a custom domain to your Firebase Hosting project, be sure to add your custom domain (e.g., `yourdomain.com`) to the origin domains in the Corsfix dashboard instead of the default Firebase-generated URL. # Neocities > Fix CORS errors in Neocities with Corsfix when calling external APIs from your website. Neocities is a popular web hosting service for static pages. It’s common to encounter CORS errors when working with Neocities since you’re typically working with static-only apps, and most APIs require requests to be made from a backend server. In this guide, we’ll fix CORS errors in Neocities using Corsfix, a secure proxy service that enables your application to communicate with any API without CORS restrictions. ## Fix CORS error [Section titled “Fix CORS error”](#fix-cors-error) ### 1. Deploy Your Neocities Website [Section titled “1. Deploy Your Neocities Website”](#1-deploy-your-neocities-website) Deploy your Neocities website as you normally would. Once deployed, you’ll find the URL of your website in your Neocities dashboard. ![Neocities website URL](https://assets.corsfix.com/n078bzf.jpg) *Your Neocities website URL* Save this URL as you’ll need it for the next step. ### 2. Add Your Domain [Section titled “2. Add Your Domain”](#2-add-your-domain) Open the [Corsfix dashboard](/docs/dashboard/application/) and add your Neocities domain. ![Adding domain](https://assets.corsfix.com/b75v1k1.jpg) *Add your domain the Corsfix dashboard* After configuring the domain, your API requests through Corsfix will work successfully in your website. ### 3. See Your API Requests Go Through [Section titled “3. See Your API Requests Go Through”](#3-see-your-api-requests-go-through) Once everything is configured, open your website and test your API functionality. You should now see your requests successfully going through the Corsfix proxy without any CORS errors. ![Successful API Request](https://assets.corsfix.com/qc6o6v9.png) *Your API requests should now work without CORS errors* Check your browser’s developer console, you should no longer see CORS-related error messages, and your API calls should complete successfully. ## Custom Domains [Section titled “Custom Domains”](#custom-domains) If you’re using a custom domain with your Neocities site, make sure to add your custom domain (e.g., `yourdomain.com`) to the origin domains in the Corsfix dashboard alongside the default Neocities URL. ## Content Security Policy [Section titled “Content Security Policy”](#content-security-policy) If you are looking for how to fix Content-Security-Policy in Neocities, refer to this article: # Netlify > Fix CORS errors in Netlify with Corsfix when calling external APIs from your website. Netlify is a popular web deployment service where you can host your static websites and single-page applications. It’s common to encounter CORS errors when working with Netlify since you’re typically working with static-only apps, and most APIs require requests to be made from a backend server. In this guide, we’ll fix CORS errors in Netlify using Corsfix, a secure proxy service that enables your application to communicate with any API without CORS restrictions. ## Fix CORS error [Section titled “Fix CORS error”](#fix-cors-error) ### 1. Deploy Your Netlify Project [Section titled “1. Deploy Your Netlify Project”](#1-deploy-your-netlify-project) Deploy your Netlify project as you normally would. Once you deploy your project, you’ll find the deployment URL on the project overview page in your Netlify dashboard. ![Netlify Deployment URL](https://assets.corsfix.com/n4ymi6g.png) *Your Netlify deployment URL can be found in the project overview* Save this deployment URL as you’ll need it for the next step. ### 2. Configure Corsfix Dashboard [Section titled “2. Configure Corsfix Dashboard”](#2-configure-corsfix-dashboard) Open the [Corsfix dashboard](/docs/dashboard/application/) and add your Netlify deployment URL as an origin domain. ![Adding origin domain](https://assets.corsfix.com/8bna8zej.png) *Add your origin domain the Corsfix dashboard* After configuring the origin domain, your API requests through Corsfix will work successfully in your deployed application. ### 3. See Your API Requests Go Through [Section titled “3. See Your API Requests Go Through”](#3-see-your-api-requests-go-through) Once everything is configured, open your deployed Netlify application and test your API functionality. You should now see your requests successfully going through the Corsfix proxy without any CORS errors. ![Successful API Request](https://assets.corsfix.com/8zn0j2e.png) *Your API requests should now work without CORS errors* Check your browser’s developer console, you should no longer see CORS-related error messages, and your API calls should complete successfully. ## Custom Domains [Section titled “Custom Domains”](#custom-domains) If you’re using a custom domain with your Netlify site, make sure to add your custom domain (e.g., `yourdomain.com`) to the origin domains in the Corsfix dashboard instead of the default Netlify URL. ## Using Secrets for API Keys [Section titled “Using Secrets for API Keys”](#using-secrets-for-api-keys) For secure handling of API keys and sensitive data, use Corsfix’s [secrets variable](/docs/cors-proxy/secrets-variable) feature. ## Development Environment [Section titled “Development Environment”](#development-environment) You can use Corsfix for [free in your local development environment](https://corsfix.com/docs/free-tier), which is especially useful when developing your app. Simply use the proxy as you normally would, and the requests will go through without any issues. You’ll only need to upgrade to a paid plan when you deploy your application to production. # Observable > Fix CORS errors in Observable with Corsfix when calling external APIs. Observable notebooks and data apps are powerful tools for data visualization and analysis. However, when making API requests directly from the browser environment within these tools, you may encounter Cross-Origin Resource Sharing (CORS) issues if the target API isn’t configured to allow requests from Observable’s domains. In this guide, we’ll fix CORS errors in Observable using Corsfix, a secure proxy service that enables your application to communicate with any API without CORS restrictions. ## Observable Notebook [Section titled “Observable Notebook”](#observable-notebook) When you run code that fetches data directly within an Observable notebook cell (e.g., using `fetch`), the request originates from a unique domain specific to your user account. To allow Corsfix to proxy requests from your notebook, you must add your specific Observable user domain to the **Origin Domains** list for your application in the [Corsfix dashboard](/docs/dashboard/application/#adding-a-new-application). The format for this origin is: `https://.static.observableusercontent.com` Replace `` with your Observable username, which you can find in the URL of any of your notebooks (e.g., `https://observablehq.com/@/notebook-name`). Once you’ve added this origin in the Corsfix dashboard, you can make API requests from your notebook without CORS errors by prefixing the target URL with the Corsfix proxy endpoint: ```javascript // Example: Fetching data from an API within an Observable notebook cell async function fetchData() { const response = await fetch( "https://proxy.corsfix.com/?https://api.example.com/data" ); const data = await response.json(); return data; } // Call the function to get the data const apiData = fetchData(); ``` Remember to also ensure the target domain (`api.example.com` in this case) is listed in your application’s **Allowed Domains** in the Corsfix dashboard. ## Observable Data Apps (Framework) [Section titled “Observable Data Apps (Framework)”](#observable-data-apps-framework) With the Observable Framework, CORS issues are less common for data loaded via [data loaders](https://observablehq.com/framework/loaders). Data loaders run during the build process (server-side or locally), fetch the data, and store it as static files alongside your deployed app. Browser CORS policies do not apply during this build step. However, if you perform `fetch` requests **directly from the client-side code** within your Observable Framework application (e.g., inside a JavaScript code block in a Markdown file or within a custom component reacting to user input), these requests *are* subject to browser CORS restrictions. To resolve CORS errors for these client-side requests: 1. **Development:** While developing locally, requests might originate from `localhost` or a similar local address. You can often use Corsfix’s free tier without needing specific origin configuration for `localhost`. Simply prefix the URL: ```javascript fetch("https://proxy.corsfix.com/?https://api.example.com/data"); ``` 2. **Deployment:** When you deploy your Observable Framework application, it will be hosted on a specific domain. You **must** add this deployment domain to your **Origin Domains** in the [Corsfix dashboard](/docs/dashboard/application/#adding-a-new-application). * If using Observable’s default hosting, the domain is typically: `https://.observablehq.cloud` (replace `` with your Observable username). * If using a custom domain, add your specific custom domain (e.g., `https://my-data-app.com`). After configuring the origin domain for your deployed app, client-side fetch requests using the Corsfix proxy URL will work correctly. ```javascript // Example: Client-side fetch within an Observable Framework component document.getElementById("myButton").addEventListener("click", async () => { try { const response = await fetch( "https://proxy.corsfix.com/?https://api.example.com/data" ); if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`); const data = await response.json(); console.log("Data fetched:", data); // Update UI with data } catch (error) { console.error("Failed to fetch data:", error); } }); ``` Again, ensure the target API domain (`api.example.com`) is included in your **Allowed Domains** in the Corsfix dashboard. # Platform Integration > Fix CORS errors in any hosting platform with Corsfix CORS proxy. Corsfix allows you to fix CORS errors on any hosting platform. Find your platform below to start fixing CORS errors in your website: * [Cloudflare Pages](/docs/platform/cloudflare-pages) * [Figma Plugin](/docs/platform/figma-plugin) * [Firebase Hosting](/docs/platform/firebase-hosting) * [Neocities](/docs/platform/neocities) * [Netlify](/docs/platform/netlify) * [Observable](/docs/platform/observable) * [Render](/docs/platform/render) * [Vercel](/docs/platform/vercel) # Render > Fix CORS errors in Render with Corsfix when calling external APIs from your website. Render is a modern cloud platform for hosting web applications. When building static sites on Render, you may encounter CORS errors when calling external APIs directly from your frontend code since many APIs only accept requests from server environments. In this guide, we’ll fix CORS errors in Render using Corsfix, a secure proxy service that enables your application to communicate with any API without CORS restrictions. ## Fix CORS error [Section titled “Fix CORS error”](#fix-cors-error) ### 1. Deploy Your Static Site to Render [Section titled “1. Deploy Your Static Site to Render”](#1-deploy-your-static-site-to-render) Start by deploying your static site to Render using their deployment process. Once deployment is complete, you can find your live application URL in the Render dashboard under your service details. ![Render Deployment URL](https://assets.corsfix.com/bb2m1mj.png) *Find your live application URL in the Render service dashboard* Save this URL as you’ll need it for configuring Corsfix in the next step. ### 2. Configure Your Application in Corsfix [Section titled “2. Configure Your Application in Corsfix”](#2-configure-your-application-in-corsfix) Navigate to the [Corsfix application dashboard](https://app.corsfix.com) and add your Render deployment URL as an origin domain for API requests. ![Adding origin domain](https://assets.corsfix.com/8bna8zej.png) *Add your origin domain the Corsfix dashboard* After adding your domain as an origin domain, your API requests through Corsfix will work correctly in your deployed static site. ### 3. Test Your API Integration [Section titled “3. Test Your API Integration”](#3-test-your-api-integration) With the configuration complete, visit your live Render application and test your API functionality. Your requests should now pass through the Corsfix proxy without any CORS-related issues. ![Successful API Request](https://assets.corsfix.com/7teag7h.png) *API requests now work seamlessly without CORS errors* Check your browser’s developer tools to confirm that CORS errors are eliminated and your API calls are executing successfully. ## Custom Domains [Section titled “Custom Domains”](#custom-domains) If you’ve configured a custom domain for your Render static site, make sure to add your custom domain (e.g., `yourdomain.com`) to the origin domains in the Corsfix dashboard instead of the default Render-generated URL. # Vercel > Fix CORS errors in Vercel with Corsfix when calling external APIs from your website. Vercel offers a powerful cloud platform for deploying and hosting modern web applications. If you’re hosting a static application on Vercel, you may run into CORS errors when attempting to call external APIs directly from your application. This happens because many APIs are configured to only accept requests from server environments. In this guide, we’ll fix CORS errors in Vercel using Corsfix, a secure proxy service that enables your application to communicate with any API without CORS restrictions. ## Fix CORS error [Section titled “Fix CORS error”](#fix-cors-error) ### 1. Deploy Your Application to Vercel [Section titled “1. Deploy Your Application to Vercel”](#1-deploy-your-application-to-vercel) Start by deploying your project to Vercel using their standard deployment process. After a successful deployment, navigate to your project’s dashboard where you’ll see the live URL for your application. ![Vercel Deployment URL](https://assets.corsfix.com/de8ccjy.png) *Locate your live application URL in the Vercel project dashboard* Copy this URL, you’ll need it to configure Corsfix in the following step. ### 2. Set Up Your Application in Corsfix [Section titled “2. Set Up Your Application in Corsfix”](#2-set-up-your-application-in-corsfix) Navigate to the [Corsfix application dashboard](https://app.corsfix.com) and register your Vercel deployment URL as an origin domain for API requests. ![Adding origin domain](https://assets.corsfix.com/8bna8zej.png) *Add your origin domain the Corsfix dashboard* Once you’ve added your domain, you can start calling API from your deployed Vercel application. ### 3. Test Your API Integration [Section titled “3. Test Your API Integration”](#3-test-your-api-integration) With the configuration complete, visit your live Vercel application and try making API calls. Your requests should now go through the Corsfix proxy without encountering CORS restrictions. ![Successful API Request](https://assets.corsfix.com/sd8hl75k.png) *API calls now work smoothly without CORS blocking* Open your browser’s developer tools to verify that CORS errors are gone and your API requests are completing as expected. ## Custom Domains [Section titled “Custom Domains”](#custom-domains) When using a custom domain for your Vercel application, remember to register your custom domain URL (such as `yourdomain.com`) in the Corsfix dashboard in addition to the default Vercel-generated URL.