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 '' 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 uses XMLHttpRequest to make a request for .

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

  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: '' + route,
        method: req.method,
        data: req.rawBody,
        params: params
    const response = await axios(request)
    context.res = {

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: '' + route,
        method: event.httpMethod,
    const response = await axios(request)

    var res = {
        "statusCode": 200,
        "headers": {
        "body": (JSON.stringify(,
        "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 -

Last updated