CORS Policy error

Implementation
#1

Hi folks, I really like the idea behind your product, but it seems not to work for me in dev and production (deployed with netlify). Access to the API works with postman, however, it does not work in localhost and production env.

I always get the following error:
Access to XMLHttpRequest at 'abc' (redirected from 'xyz') from origin 'http://localhost:63343' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Can you please help me?

#2

Hello Manuel Oliver Buri,

Yes, it seems that your requests are being blocked by our security protections in our firewall. If you are doing your tests in ‘testing mode’, your requests will only be allowed from the IP of your computer. Once it works and you switch your connection to ‘production mode’, requests will only be allowed from the ‘allowed hosts’ that you configured.

If you still have issues you can send us your API scenario in more detail to support@getkor.io and we will see if we can help you further.

Best regards,

#3

Hi, I have the same problem that Oliver. The thing is that I am trying to request the API from my localhost for testing and development purposes. I understand that in testing-mode, localhost is allowed by default, so I don’t understand why this CORS error is happening. I can request the API using POSTMAN though. If anyone can help me I would appreciate it a lot!

#4

Hello Adn,

It seems your requests have been completed as expected from our API side, maybe there’s something missing in your FE code. You can check from our example code KORConnect example if the code is as expected. If your requests are still not working, you can send us your code support@getkor.io so we can see if there’s something missing.

Best regards,

#5

Thank your for your answer. Let me give you and example of my problem using a very popular public API.

I have created in Korconnect a new connection for the pokemon API (pokeapi.co/api/v2/pokemon). This API doesn’t need any apikey but the platform need one to create the connection so I invented it.

The Secure URL given by the platform is: https://adn1217f.korconnect.io/Pokemon/

The x-api-key for this connection is: TfQDTqGP732ibJonOyCNx35k3LAmoP8D1sHvCrm0

I am using the next code in my webApp:

let myHeaders = new Headers();

myHeaders.append("x-api-key", `TfQDTqGP732ibJonOyCNx35k3LAmoP8D1sHvCrm0`);

let requestOptions = {
method: 'GET',
headers: myHeaders,
redirect: 'follow',
};

let endPoint = 'ditto';
let URI = https://adn1217f.korconnect.io/Pokemon/ + endPoint;
let resp = await fetch(URI, requestOptions);
console.log(resp)
console.log(URI);
let respStr = await resp.text();
console.log(respStr)

As you can see, this code is (almost) exactly the same as it is used in your examples but with async-await to handle the promises.

The problem I have is that when I do the get request to https://adn1217f.korconnect.io/Pokemon/ditto through POSTMAN I get a perfect response (json) but when I do the request from my code, the answer I have is this one with status 301:
“<a href=”/api/v2/pokemon/ditto">Moved Permanently.\n\n"

¿Any additional help you could give me? Thank you

#6

Hello Adn,

I was looking at your connection, an I think that the problem is that your targetURL is pointing to ‘pokeapi.co/api/v2’ while it should be pointing to ‘pokeapi.co/api/v2/pokemon’. The ‘Pokemon’ in ‘https://adn1217f.korconnect.io/Pokemon/’ refers to the KORConnection you are using, but is not part of the endpoint path. You can have ‘https://adn1217f.korconnect.io/API-1/’, ‘https://adn1217f.korconnect.io/API-2/’, and so on.

Let me know if that helped you.

Best regards,