No 'Access-Control-Allow-Origin' header is present on the requested resource

[phusting]

I'm getting a CORS error and it is because I can't go across domains from my domain to yours. Any suggestions?

Access to fetch at 'https://api.replicate.com/v1/predictions' from origin 'https://ghostwriter-ai.com' 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

[mattt]

Hi @phusting. This is expected behavior. Replicate's API doesn't support CORS, so this library can't interact with the API directly from a browser. For more information about how to build a web application check out our "Build a website with Next.js" guide.

[slimandslam]

Could you modify your JS API by adding a flag that a user can set so that they can run your code from a web browser? This is very useful for testing purposes. I think the OpenAI API uses "dangerouslyAllowBrowser: true"

[mattt]

@slimandslam There's nothing this library can do on its own to communicate directly with Replicate's API from a browser.

This library can work from a browser if it's communicating with with a proxy of the Replicate API that returns the proper CORS headers. If you have such a proxy set up, you can configure it as the custom base URL for the client.

[slimandslam]

I misspoke. What I meant to ask is if you could modify your API so that it works like all the other APIs out there. So that one can call your API from a web browser. I have no interest in setting up a proxy just to test your API.

[mattt]

@slimandslam As the OpenAI client suggests, enabling sending long-lived bearer tokens from a browser is dangerous, as it leaks credentials to clients. This is an annoying source of friction, and we're looking at other ways to allow users to call Replicate's API from a browser.

In the meantime, you can try it out locally by running a script with Node or creating an app with Next.JS

[naticio]

so if I am using expo RN then I guess I need to deploy my own nodejs backend right?

[DavidGOrtega]

@mattt why is that dangerous? Its a https client like a server or just plain CURL or anything else. At some point no matter when you are sending the bearer token 🤷
What about apps?
I have an electron app and do not see why is WORSE than doing the request with a proxy with cors enabled in the same network that could be attacked exactly the same.

[alexis779]

@DavidGOrtega I was in the same situation. While building a generative AI prototype, i was hoping to focus mostly on the frontend. I did not want to spin up an API just to workaround the CORS error either. However, it's enforced for your own interest and you can't do without it. How would automate getting metrics and logging for your customer traffic otherwise?

Even in a cross-platform app such as electron or tauri, It is possible for the attacker to decrypt the HTTPS request header, encyprted via TLS, exposing the API key in clear.

To be safe, you need to introduce a backend proxy, using the cloud provider of your choice (Vercel, Heroku, Modal, ...).

I ended up writing a custom AWS Lambda streaming function in TypeScript: https://github.com/alexis779/lambda-openai-proxy
Feel free to try it out and let me know any feedback ...