PacktPublishing / -Vue.js-3-By-Example

Vue.js 3 By Example, published by Packt
MIT License
174 stars 67 forks source link

Chapter 5 example URL requires access key #12

Closed clockwiser closed 1 year ago

clockwiser commented 1 year ago

In CurrencyConverter.vue, retrieve currency rate from the following URL, but the site requires access key.

https://api.exchangeratesapi.io/latest

{ "success": false, "error": { "code": 101, "type": "missing_access_key", "info": "You have not supplied an API Access Key. [Required format: access_key=YOUR_ACCESS_KEY]" } }

marabesi commented 1 year ago

you can access this link https://apilayer.com/marketplace/exchangerates_data-api#pricing and select free plan to generate a key

clockwiser commented 1 year ago

The free plan only provides an apikey. Don't know whether "apikey" and "access_key" are the same thing. When try the following URL, the site returns error. https://api.exchangeratesapi.io/latest?access_key=DRPO0QgXbXbWps6RR4bzINSNvTp9xMlB

{ "success": false, "error": { "code": 101, "type": "invalid_access_key", "info": "You have not supplied a valid API Access Key. [Technical Support: support@apilayer.com]" } }

marabesi commented 1 year ago

according to their docs you need to pass the key via header, as described here https://apilayer.com/docs/article/getting-started.

You can also have a look in this pic that has a snippet:

image

In other words you cannot access the content via browser as you are doing, I would recommend using postman for that.

clockwiser commented 1 year ago

according to their docs you need to pass the key via header, as described here https://apilayer.com/docs/article/getting-started.

You can also have a look in this pic that has a snippet:

In other words you cannot access the content via browser as you are doing, I would recommend using postman for that.

I tried putting the apikey into headers. It worked with thunder, a vs code plugin, similar to postman. But when use it inside ionic, like in example 5, there was a network error. I am not sure if it is a CORS problem.

marabesi commented 1 year ago

Can you post the error here? A screenshot would be even better

marabesi commented 1 year ago

What does it say in the network tab? Is there an HTTP status there?

clockwiser commented 1 year ago

Finally it worked. Should change URL. https://api.apilayer.com/exchangerates_data/latest