Getting an error when fetch third party API

Ask the community
,
1

Hi,
I am getting an error when I use Fetch POST method. Here is code.
fetch( “https://uat.driver-vehicle-licensing.api.gov.uk/vehicle-enquiry/v1/vehicles” , {
method: “post” ,
headers: {
“Content-Type” : “application/json” ,
“x-api-key” : APIKey
},
body: { “registrationNumber” : “BMZ5155” }
})
.then((httpResponse) => {
if (httpResponse.ok) {
return httpResponse.json();
} else {
return Promise.reject( “Fetch did not succeed” );
}
})
.then((json) => { return json;})
. catch (err => { return err});
Here is the error that I am getting.
Access to fetch at ‘https://uat.driver-vehicle-licensing.api.gov.uk/vehicle-enquiry/v1/vehicles’ from origin ‘https://corvidexpert.wixsite.com’ 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. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.

Please help me to solve this issue.
Thank You.

2

Have you set any options for this?
https://www.wix.com/corvid/reference/wix-http-functions.html#options

3

Also, are you allowed to use this API, have you registered yourself? Assuming you have but just checking.
https://developer-portal.driver-vehicle-licensing.api.gov.uk/apis/vehicle-enquiry-service/vehicle-enquiry-service-description.html#register-for-ves-api

Also, without going through all the documents for this, why are you adding the uat in the HTTP Post?

To call the API, issue an HTTP POST request to the following URL:

https://driver-vehicle-licensing.api.gov.uk/vehicle-enquiry/v1/vehicles

4

Okay, think I understand why there are the two base urls for this.
https://developer-portal.driver-vehicle-licensing.api.gov.uk/apis/vehicle-enquiry-service/v1.1.0-vehicle-enquiry-service.html#base-urls

Seems that ‘https://uat.driver-vehicle-licensing.api.gov.uk/vehicle-enquiry’ is for testing environment

Whereas ‘https://driver-vehicle-licensing.api.gov.uk/vehicle-enquiry’ is for production environment which you would have on your live published site.

 "servers": [
    {
      "description": "Production environment",
      "url": "https://driver-vehicle-licensing.api.gov.uk/vehicle-enquiry"
    },
    {
      "description": "Test environment",
      "url": "https://uat.driver-vehicle-licensing.api.gov.uk/vehicle-enquiry"
    }
  ],
5

Thank you GOS for quick reply. I checked fetch options that you mentioned. Could you please help me for this? I applied that options and I think I don’t know how to apply correctly.
fetch( " https : //driver-vehicle-licensing . api . gov . uk/vehicle-enquiry/v1/vehicles " , { method: “post” , headers: { “Content-Type” : “application/json” , “x-api-key” : APIKey }, body: { “registrationNumber” : “BMZ5155” } }) .then((httpResponse) => { if (httpResponse.ok) { return httpResponse.json(); } else { return Promise.reject( “Fetch did not succeed” ); } }) .then((json) => { return json;}) . catch (err => { return err});
this is code that i want to run correctly.
corvidexpert . wixsite . com/ mysite-7/
And this is the URL of my testing site.
Could you please help me to run this correctly?

Thanks again.

6

If you have received 2 keys one is for tesing for purposes while the other is for production. try using both. You should also probably add the header key value: “Accept”: “application/json”.