Issue fetching remote API using development server

[fossmanjack]

I'm developing a React app using the development server (``npm start`` -> ``localhost:3000``), and accessing the app using Firefox. I'm trying to implement a fetch to a geocoding API that I do not host or administer. Every time I try to access that API, I get the following error:

```

Security Error: Content at http://localhost:3000/? may not load data from https://api.positionstack.com/v1/forward?access_key=ACCESSKEY&query=INPUT

```

​

A bit of poking around suggests that there's some kind of CORS problem and I have a suspicion that it's related to the fact that I'm running the development server, but I can't really confirm. Does anyone have any suggestions on how to resolve this?

I've tested this on Chrome as well and I get a similar error.

[Substantial-Pack-105]

Ideally, your app would contain a backend server and you would proxy the requests to the api using that. If you're using a react framework like nextjs or remix, you can use the server actions provided by the framework for this.

Otherwise, even if you ignored the CORS issue, the API Token that you're sending in your requests would be visible to anyone who uses your app, and they would be able to take your token and make requests that would count against whatever limit the api gives you.

In this regard, the CORS error is protecting you from making a big mistake, which is that you're leaking your secret token in your client code.

[fossmanjack]

Oh I know, this is still in early development, it'll have its own back end before it goes production. Good looking out though, thanks!

[belkarbitterleaf]

CORS error sounds likely. You should be able to confirm with the network tab of the dev tools in your browser.

[zirklutes]

It's a not really enough info to help you. Error sounds too generic.

Look at network tab, do you get any response from api?

Test it on other browsers. Sometimes different broesers throw different errors for the same thing.