last day (16 days later) » 

12:52 AM
-1
Q: Access to XMLHttpRequest at '....' from origin 'http://localhost:5173' has been blocked by CORS policy

SakshiThis might be a duplicate but I tried implementing a lot of solutions and it's not working. I'm encountering the error while integrating the Detect Language API into my application. This is my code. const apiKey = String(import.meta.env.VITE_API_KEY); const detectlanguage = new DetectLanguage...

 
Have you enabled and configured CORS in the backend?
 
No backend. Frontend only application.
 
Please read the tag descriptions before you use a tag. The api tag contains: "DO NOT USE". The frontend contains a AJAX call to a backend. That's not a frontend only application. A frontend only application doesn't conain AJAX calls. Are you aware that the apiKey is public for all visitors?
 
my bad! Yeah, I'm aware. I have hidden the apiKey in the application.
 
https://ws.detectlanguage.com/0.2/languages doesn't allow access from browsers. You need a backend. The frontend shouldn't contain the apiKey. " I have hidden the apiKey in the application." No, you can't hide anything in the frontend. Show me your frontend and I give you the hidden apiKey.
 
12:52 AM
The post method to endpoint https://ws.detectlanguage.com/0.2/detect is working though? I have placed the apiKey in .env folder. That should hide it right?
 
"I have placed the apiKey in .env folder. That should hide it right?" Wrong, the build process copies the key as clear text into the application. You can see it in clear text in the debugger and in the network monitor. The client library is for Node.js applications, not for browsers. Do you have a link to the application? I would like to prove it. Stack Overflow is a question and answer platform. Do you have a specific question?
 
Yes, I found it in network tab. Thanks I didn't knew. How do I avoid this? This is quite basic application and this is the first time I'm working with API keys.
 
You must not use the api key in the frontend. You need a backend. The frontend and everything in it is public.
 
Ok. So should next js work? It's the only framework I know besides react.
 
Yes, every backend should work.
 
12:55 AM
Also will this solve the error in fetching languages?
 
Yes
CORS policies are browser policies. You can consume that API with your own backend and consume your own backend API with the browser.
 
1:13 AM
Thanks. But I still don't understand how the detection endpoint is working fine. The API Key concern is there so I am migrating but still I would like to understand the concept. The languages endpoint should also atleast work. Can you help me understand this?
 
1:33 AM
No, I can't help you. I don't have an API key to analyze the server response.
The concept of CORS is described here: developer.mozilla.org/en-US/docs/Web/HTTP/CORS
 

  last day (16 days later) »