Troubleshooting CORS Errors on DataHub

Find ready to use proxy to troubleshoot the CORS errors on DataHub

CORS Errors are common when you’re working with APIs but it’s very important to handle them effectively due to several security reasons.

What does it look like?

Access to fetch at 'https://solana--mainnet--rpc.datahub.figment.io/' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: 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.

What it is? - Cross-Origin Resource Sharing (CORS) is an HTTP-header based mechanism that allows a server to indicate any other origin (domain, scheme, or port) than its own from which a browser should permit loading of resources. CORS also relies on a mechanism by which browsers make a “preflight” request to the server hosting the cross-origin resource, in order to check that the server will permit the actual request. In that preflight, the browser sends headers that indicate the HTTP method and headers that will be used in the actual request.

An example of a cross-origin request: the front-end JavaScript code served from https://domain-a.com uses XMLHttpRequest to make a request for https://domain-b.com/data.json .

For security reasons, browsers restrict cross-origin HTTP requests initiated from scripts. For example, XMLHttpRequest and the Fetch API follow the same-origin policy. This means that a web application using those APIs can only request resources from the same origin the application was loaded from unless the response from other origins includes the right CORS headers.

The CORS mechanism supports secure cross-origin requests and data transfers between browsers and servers. Modern browsers use CORS in APIs such as XMLHttpRequest or Fetch to mitigate the risks of cross-origin HTTP requests. Source - Mozilla MDN Web Docs

How to handle them when working with Figment’s DataHub?

There are two major ways to handle CORS errors effectively so you don’t expose your API keys and credentials on the Client-Side.

1. Use a proxy - One solution for making cross-origin requests is to use a CORS proxy to make it seem as though you’re making the request from a location that’s allowed.

There are multiple CORS proxies (Must Check) out there that you can use for free. Some of them are

• cors-anywhere

• Crossorigin.me is easy to use — you simply prepend https://crossorigin.me/ to your request URL (Not Recommended for Production).

• Cloudflare Workers - CORS header proxy Doc.

  • CORS Header Proxy Template

  • Cloudflare worker Template by Figment

  • Cloudflare worker Template by Figment (Support Websockets)

• nginx proxy Template

1. Use a serverless function - Using a serverless function is another more effective way to handle the CORS errors and proxy our requests and here in this we build our own functions or micro-infrastructure to call a web service and interact using APIs. Azure, AWS & GCP are most popular for running serverless functions. Sharing some examples of serverless functions built and shared by our community members.

i. Azure Function for CORS proxy by Florian Uhde - Check the Gist HERE

const axios = require('axios');
const decode = require('unescape');

module.exports = async function (context, req) {
    var route = decode(context.bindingData.route || req.params.restOfPath);
    let params = req.query
    delete params['code']
    const request = {
        url: 'https://secret-2--lcd--full.datahub.figment.io/apikey/xxxxxxxxxxxxxxxx/' + route,
        method: req.method,
        data: req.rawBody,
        params: params
    }
    const response = await axios(request)
    context.res = {
        body: response.data
    };
}

ii. AWS Lambda Function for CORS proxy by Austin Woetze- Check the Gist HERE

const axios = require('axios');

exports.handler = async (event) => {

   const route = event.path
   const request = {
        url: 'https://secret-2--lcd--full.datahub.figment.io/apikey/xxxxxxxxxxxxxxxxxxxxxxxx' + route,
        method: event.httpMethod,
        data:{}
    }
    const response = await axios(request)

    var res = {
        "statusCode": 200,
        "headers": {
            "Access-Control-Allow-Origin":"*"
        },
        "body": (JSON.stringify(response.data)),
        "isBase64Encoded": false
    };
    return res;

};

iii. Template if you want to host your own nginx server - DataHub CORS Development Proxy

If you have any other solution for the same feel free to share it with us on our discord server. Thanks in advance, we appreciate your contribution.

References -

1. Mozilla MDN Web Docs

2. Big Commoerce Devloper Blog