CORS issues when accessing from prod domain (but not from vercel.app domain)

[notdiogenes]

I'm experiencing odd behavior with a Uniswap interface I've deployed through Vercel. When accessing the site through the [site].vercel.app link, the interface works as it's meant to and fetches the appropriate API endpoints (graphql) without issue. When accessing the site through a production domain, the API calls trigger CORS errors, 409s, etc.

I experience similar behavior when accessing the Uniswap widget, although with the /quote endpoint — it works on the vercel.app domain but not on the prod domain.

Is this intended behavior from Uniswap's API endpoints?

[gabririgo]

+1 running the app locally work fine, running it on a custom domain returns a 409 error.

[gabririgo]

the issue is solved by creating a reverse proxy and querying its endpoint instead of Uniswap's endpoint. As it is most likely the intended flow, this is an issue at a client level, not at Uniswap's APIs.

I found this tutorial very helpful: https://developers.cloudflare.com/workers/examples/cors-header-proxy/

[developer-devo]

hi @gabririgo I'm facing the same issue but not able to fix it, can you help me with it ?

[gabririgo]

hi @gabririgo I'm facing the same issue but not able to fix it, can you help me with it ?

the server does not return the CORS headers to the client, so you can't query the uniswap api directly. Instead, you need to make the request from a server and add the necessary header to the response. You need to build a middleware and proxy your requests through it. The Cloudflare example I posted is a working handler. You can alternatively use AWS Lambda, Nginx, or any other tool you prefer. A further explanation can be found on AWS's docs.

The 2 important steps are:

1. you might have to modify the header of your POST request to the uniswap api. This is needed to avoid making the API server think this is a cross-site request.

For simple cross-origin POST method requests, the response from your resource needs to include the header Access-Control-Allow-Origin: '*' or Access-Control-Allow-Origin:'origin'

2. in your response to the client, you need to return the required headers

export const handler = async (event) => {
    const response = {
        statusCode: 200,
        headers: {
            "Access-Control-Allow-Headers" : "Content-Type",
            "Access-Control-Allow-Origin": "https://www.example.com",
            "Access-Control-Allow-Methods": "OPTIONS,POST,GET"
        },
        body: JSON.stringify('Hello from Lambda!'),
    };
    return response;
};

It took me quite a bit of time to figure this out, but using your own api has a few perks, like caching requests to avoid being rate limited by the server.

[developer-devo]

thanks for answering @gabririgo Appreciate!