# CORS error using Leaflet Routing Machine in Angular 19
**URL:** https://ask.openrouteservice.org/t/cors-error-using-leaflet-routing-machine-in-angular-19/7036
**Category:** openrouteservice
**Created:** [February 24, 2025, 5:09am UTC](https://ask.openrouteservice.org/t/cors-error-using-leaflet-routing-machine-in-angular-19/7036 "2025-02-24T05:09:41Z")
**Posts on this page:** 15
**Page:** 1
### Author:  [@Dhilip\_R](https://ask.openrouteservice.org/u/Dhilip_R)
#### Post date: [February 24, 2025, 5:09am UTC](https://ask.openrouteservice.org/t/cors-error-using-leaflet-routing-machine-in-angular-19/7036/1 "2025-02-24T05:09:41Z")
Hi,
I am using Leaflet Routing Machine and when I insert ApiKey, it throws error
```auto
var router: any = {};
router = L.Routing.control({
router: new L.Routing.OpenRouteServiceV2('apikey'),
waypoints: [
L.latLng(_origin[1], _origin[0]),
L.latLng(_destination[1],_destination[0])
],
//routeWhileDragging: false,
//show: false,
//fitSelectedRoutes: false,
//createMarker: function (i, waypoint, n) {
// return null;
//},
lineOptions: {
styles: [{ color: '#9f150b', opacity: 1, weight: 4, className: 'animate' }],
extendToWaypoints: false,
missingRouteTolerance: 0
}
});
router.addTo(osmmap);
```
I get CORS error
…
Access to XMLHttpRequest at ‘[https://api.openrouteservice.org/directions?coordinates=80.140111%2C12.852134|79.5596749969%2C12.2287612318&instructions=true&instructions\_format=text&geometry\_format=geojson&preference=recommended&units=m&profile=driving-car&api\_key=](https://api.openrouteservice.org/directions?coordinates=80.140111%2C12.852134%7C79.5596749969%2C12.2287612318&instructions=true&instructions_format=text&geometry_format=geojson&preference=recommended&units=m&profile=driving-car&api_key=) `apikey`’ from origin ‘[https://127.0.0.1:54037](https://127.0.0.1:54037)’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
…
Thanks in advance
---
### Author:  [@Zwyxy-fr](https://ask.openrouteservice.org/u/Zwyxy-fr)
#### Post date: [February 24, 2025, 9:17am UTC](https://ask.openrouteservice.org/t/cors-error-using-leaflet-routing-machine-in-angular-19/7036/2 "2025-02-24T09:17:16Z")
Note sure routing is included by default with leaflet what are you using ? (looks like routing machine that has not been maintain in 9 years).
Request format does not match v2 documentation [Dashboard | ORS](https://openrouteservice.org/dev/#/api-docs/directions%20service)
---
### Author:  [@Dhilip\_R](https://ask.openrouteservice.org/u/Dhilip_R)
#### Post date: [February 24, 2025, 11:55am UTC](https://ask.openrouteservice.org/t/cors-error-using-leaflet-routing-machine-in-angular-19/7036/3 "2025-02-24T11:55:24Z")
Tyvm I was not using this latest one. I need one more help. I used Directions and it gives me json as segments. But what gives me coordinates instead? Thanks in advance
---
### Author:  [@Zwyxy-fr](https://ask.openrouteservice.org/u/Zwyxy-fr)
#### Post date: [February 24, 2025, 12:18pm UTC](https://ask.openrouteservice.org/t/cors-error-using-leaflet-routing-machine-in-angular-19/7036/4 "2025-02-24T12:18:13Z")
Can you explain what you are trying to do and how you are trying to to it ?
---
### Author:  [@Dhilip\_R](https://ask.openrouteservice.org/u/Dhilip_R)
#### Post date: [February 24, 2025, 12:27pm UTC](https://ask.openrouteservice.org/t/cors-error-using-leaflet-routing-machine-in-angular-19/7036/5 "2025-02-24T12:27:22Z")
> [@Zwyxy-fr](#):
>
> to do and how y
hi
this is my new code
```auto
let request = new XMLHttpRequest();
request.open('POST', "https://api.openrouteservice.org/v2/directions/driving-car");
request.setRequestHeader('Accept', 'application/json, application/geo+json, application/gpx+xml, img/png; charset=utf-8');
request.setRequestHeader('Content-Type', 'application/json');
request.setRequestHeader('Authorization', 'apiKey');
request.onreadystatechange = function () {
if (this.readyState === 4) {
console.log('Status:', this.status);
console.log('Headers:', this.getAllResponseHeaders());
console.log('Body:', JSON.parse(this.responseText));
router = JSON.parse(this.responseText);
}
};
const body = '{"coordinates":[' + _origin + ',' + _destination + ']}';
request.send(body);
```
The origin and destination are Chennai and Kanchipuram of India
It returns features-\>geometry as
…
2010
“Could not find routable point within a radius of 350.0 meters of specified coordinate 0: 12.8521340 80.1401110.; Could not find routable point within a radius of 350.0 meters of specified coordinate 1: 12.2287612 79.5596750.”
…
But in old coding it (leaflet routing machine ) return coordinates correctly
Also for Western cities it returns correctly under features-\>geometry in the form of my needed coordinates
Is it feasible for south indian cities?
---
### Author:  [@Zwyxy-fr](https://ask.openrouteservice.org/u/Zwyxy-fr)
#### Post date: [February 24, 2025, 12:42pm UTC](https://ask.openrouteservice.org/t/cors-error-using-leaflet-routing-machine-in-angular-19/7036/6 "2025-02-24T12:42:41Z")
> [@Dhilip\_R](#):
>
> 12.8521340 80.1401110
Use long,lat coordinates
Note : API playgroud is quite uselfull and let you test request to detect this kind of mistakes
---
### Author:  [@Dhilip\_R](https://ask.openrouteservice.org/u/Dhilip_R)
#### Post date: [February 24, 2025, 12:49pm UTC](https://ask.openrouteservice.org/t/cors-error-using-leaflet-routing-machine-in-angular-19/7036/7 "2025-02-24T12:49:07Z")
API Playground is giving the error too. Is it possible for any two cities in South India ? I need only 2 cities animated maps
---
### Author:  [@Zwyxy-fr](https://ask.openrouteservice.org/u/Zwyxy-fr)
#### Post date: [February 24, 2025, 12:50pm UTC](https://ask.openrouteservice.org/t/cors-error-using-leaflet-routing-machine-in-angular-19/7036/8 "2025-02-24T12:50:45Z")
You didnt gave me the requests you were trying to pass . Did you try switching coordinates to long,lat ? Neither what you were expecting as result
---
### Author:  [@Dhilip\_R](https://ask.openrouteservice.org/u/Dhilip_R)
#### Post date: [February 24, 2025, 12:54pm UTC](https://ask.openrouteservice.org/t/cors-error-using-leaflet-routing-machine-in-angular-19/7036/9 "2025-02-24T12:54:59Z")
start
`12.2287612318, 79.5596749969`
end
`13.0832,80.2755`
this is my new request
`let request = new XMLHttpRequest();`
`request.open('POST', "https://api.openrouteservice.org/v2/directions/driving-car");`
`request.setRequestHeader('Accept', 'application/json, application/geo+json, application/gpx+xml, img/png; charset=utf-8');`
`request.setRequestHeader('Content-Type', 'application/json');`
`request.setRequestHeader('Authorization', 'apikey');`
`request.onreadystatechange = function () {`
` if (this.readyState === 4) {`
` console.log('Status:', this.status);`
` console.log('Headers:', this.getAllResponseHeaders());`
` console.log('Body:', JSON.parse(this.responseText));`
` router = JSON.parse(this.responseText);`
` }`
`};`
`const body = '{"coordinates":[[12.2287612318, 79.5596749969],[13.0832,80.2755]]}';`
`request.send(body);`
I was expecting features\>geometry array. Now currently it shows error 2010 radius 350 error
switched coordinates same error ☹
ETA:
I need what are the openrouteservice coordinates for Chennai. Can i find it on openrouteservice playground?
---
### Author:  [@Zwyxy-fr](https://ask.openrouteservice.org/u/Zwyxy-fr)
#### Post date: [February 24, 2025, 1:12pm UTC](https://ask.openrouteservice.org/t/cors-error-using-leaflet-routing-machine-in-angular-19/7036/10 "2025-02-24T13:12:54Z")
> [@Dhilip\_R](#):
>
> const body = ‘{“coordinates”:[[12.2287612318, 79.5596749969],[13.0832,80.2755]]}’;
Need long lat coordinates.
Additionnaly it seem that your stating point is nowhere near a driveable Road is that correct?
API playground request with slightly different starting point :
---
### Author:  [@Dhilip\_R](https://ask.openrouteservice.org/u/Dhilip_R)
#### Post date: [February 24, 2025, 1:20pm UTC](https://ask.openrouteservice.org/t/cors-error-using-leaflet-routing-machine-in-angular-19/7036/11 "2025-02-24T13:20:49Z")
Whoa thanks for finding the correct coordinates. Could you give me exact start coordinates? they are not accepting in script for start. same error for start only
End is working
No problem if start is farther from current coordinate.
also you forgot to hide the apikey from bottom textbox
---
### Author:  [@Zwyxy-fr](https://ask.openrouteservice.org/u/Zwyxy-fr)
#### Post date: [February 24, 2025, 1:25pm UTC](https://ask.openrouteservice.org/t/cors-error-using-leaflet-routing-machine-in-angular-19/7036/12 "2025-02-24T13:25:45Z")
> [@Dhilip\_R](#):
>
> also you forgot to hide the apikey from bottom textbox
Thx !
If you need coordinates just right click on google map to show the locations coordinates ( in lat,long), just pick a point on a road if you want to be sure to get a response
---
### Author:  [@Dhilip\_R](https://ask.openrouteservice.org/u/Dhilip_R)
#### Post date: [February 24, 2025, 1:27pm UTC](https://ask.openrouteservice.org/t/cors-error-using-leaflet-routing-machine-in-angular-19/7036/13 "2025-02-24T13:27:16Z")
> [@Zwyxy-fr](#):
>
> nt to be sure to ge
I made a mistake. it is hard coded. brb
---
### Author:  [@Dhilip\_R](https://ask.openrouteservice.org/u/Dhilip_R)
#### Post date: [February 24, 2025, 2:14pm UTC](https://ask.openrouteservice.org/t/cors-error-using-leaflet-routing-machine-in-angular-19/7036/14 "2025-02-24T14:14:24Z")
Thanks a lot it is working
I have a doubt. When I place two maps on a page, only first one is loading. Is it possible to place 2 maps on same page? Thanks in advance
(map\_libregl maps)
---
### Author:  [@jschnell](https://ask.openrouteservice.org/u/jschnell)
#### Post date: [March 5, 2025, 2:13pm UTC](https://ask.openrouteservice.org/t/cors-error-using-leaflet-routing-machine-in-angular-19/7036/15 "2025-03-05T14:13:13Z")
Hey,
this is a support forum for the openrouteservice, and this question is regarding maplibre GL.
I suggest asking in their community, or on a general forum like stackoverflow.
Best regards