Help - using wilcom API with axios - CORS error

HI all,

I am new to the Wilcom community. It's my first time working with the API. I am trying to make an api call to ewa.wilcom.com/1.4/api/info using axios, and i am passing my appid and appkey in form data but I keep getting the same CORS error:

Access to XMLHttpRequest at 'ewa.wilcom.com/1.4/api/info' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

i tried added 'Access-Control-Allow-Origin' header': '*' to my headers, but i get:

localhost/:1 Access to XMLHttpRequest at 'ewa.wilcom.com/1.4/api/info' from origin 'http://localhost:8080' 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.

I tried calling the api using postman with my credentials, header with content-type: application/x-www-form-urlencoded and I get a xml response back but I can't seem to get it to work on browsers.

Has anyone encountered this issue and knows what's the actual issue and has a work around?

Thank you.

Hi Ken,

1. What tool are you using for running the API?

2. Make sure you are using the correct App ID and APP Key
To get the application Id and key, you have to sign in the Developer Portal.
developer.wilcom.com/
Navigate to the applications page:
You will see a default application and its Application Id in a table. See the application key by clicking
view button at right of an applications.

3. See attached example of setup when using POSTMAN.

Let me know how it goes,

Kind regards,
Karla

Hi Ken,

Apologies I missed the last part of your message that it works in your POSTMAN.

Not familiar with axios.
As for the browser we will check and will pass this to our API admin.

We have not encountered the issue you are having.

Thanks,
Karla

HI Karla,

Thank you for the reply, I attached 2 images from postman with a successful xml response from the api, so all the credentials work.

I am using Vue.js for my frontend and axios for api calls.

The screen shot of my code, I attempted to send a post request using Axios with my data being pass as either a formdata or a stringify version of an object with my appid, and appkey.

attached is also a screenshot of the error message on dev tools console i received after the failed api call attempt.

I'm not sure how to configure my headers to get past this CORS issue or wether its something else entirely.

Kind regards,
Kenel

HI Karla,

Thank you for the reply, I attached 2 images from postman with a successful xml response from the api, so all the credentials work.

I am using Vue.js for my frontend and axios for api calls.

The screen shot of my code, I attempted to send a post request using Axios with my data being pass as either a formdata or a stringify version of an object with my appid, and appkey.

attached is also a screenshot of the error message on dev tools console i received after the failed api call attempt.

I'm not sure how to configure my headers to get past this CORS issue or wether its something else entirely.

Kind regards,
Ken

HI Karla,

Thank you for the reply, I attached 2 images from postman with a successful xml response from the api, so all the credentials work.

I am using Vue.js for my frontend and axios for api calls.

The screen shot of my code, I attempted to send a post request using Axios with my data being pass as either a formdata or a stringify version of an object with my appid, and appkey.

attached is also a screenshot of the error message on dev tools console i received after the failed api call attempt.

I'm not sure how to configure my headers to get past this CORS issue or wether its something else entirely.

Kind regards,
Ken

Hi Ken,

My understanding is its out of scope from our API. EWA is not supposed to be called from browser directly because AppId and AppKey can’t be stored in client side javascript.

Can you try to configure your development server for your site to make a proxy for the api and to enable CORS and set it something like this depending on server you are using.
Access-Control-Allow-Origin: http://localhost:3000 or Access-Control-Allow-Origin: *

Hope this helps.

Thanks,
Karla