Uniswap
CORS issues when accessing from prod domain (but not from vercel.app domain)
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?
+1 running the app locally work fine, running it on a custom domain returns a 409 error.
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/
hi @gabririgo I'm facing the same issue but not able to fix it, can you help me with it ?
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:
- 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'
- 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.
@gabririgo Can you please help use creating the reverse proxy or any way of solving it
