# How to connect to Mautic API from Javascript with Basic Auth

**URL:** <https://forum.mautic.org/t/how-to-connect-to-mautic-api-from-javascript-with-basic-auth/14238>\
**Category:** Development\
**Created:** [May 8, 2020, 7:08am UTC](https://forum.mautic.org/t/how-to-connect-to-mautic-api-from-javascript-with-basic-auth/14238 "2020-05-08T07:08:43Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![adiux](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/adiux/32/5793_2.png) [@adiux](https://forum.mautic.org/u/adiux)\
**Post date:** [May 8, 2020, 7:08am UTC](https://forum.mautic.org/t/how-to-connect-to-mautic-api-from-javascript-with-basic-auth/14238/1 "2020-05-08T07:08:43Z")

</div>

Hi

Im trying to connect to my Mautic API from Javascript. I’m getting stuck with a CORS error:  
`Request header field authorization is not allowed by Access-Control-Allow-Headers`

 ![image](https://us1.discourse-cdn.com/flex020/uploads/mautic/original/2X/1/1d53e39a6e5caf8bb600ffef3496f95eff9e5777.png)

My standard JavaScript API call with fetch:

```javascript
// using Fetch API
var mauticUrl = 'http://mautic.ddev.site/api/contacts';
var myHeaders = new Headers();
myHeaders.append("Authorization", 'Basic ' + btoa('myuser:mypswd'));

fetch(mauticUrl, {
    credentials: "include",
    mode: 'cors',
    headers: {
      'Content-Type': 'application/json'
    },
    headers: myHeaders
}).then(function (response) {
    return response.json();
}).then(function (json) {
    console.log(json);
});

```

The call works perfectly with Postman and Curl

```auto
curl --location --request GET 'http://mautic.ddev.site/api/contacts/' \
--header 'Authorization: Basic KEY'

```

Tested on the Mautic ddev setup with Mautic 3.00 beta. And on my production setup 2.16

Is the authorization header missing from Mautic? Something wrong with my header?

Thanks for any help!

---

<div class="post-metadata">

**Author:** ![adiux](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/adiux/32/5793_2.png) [@adiux](https://forum.mautic.org/u/adiux)\
**Post date:** [May 15, 2020, 6:52am UTC](https://forum.mautic.org/t/how-to-connect-to-mautic-api-from-javascript-with-basic-auth/14238/2 "2020-05-15T06:52:56Z")

</div>

**Edit 25.5.2020**  
After some debugging I found part of the solution.

The first problem was that the headers `Access-Control-Request-Headers` and `Origin` have to be present in the request otherwise no CORS headers are returned.

An example where CORS headers are returned:

```auto
curl -s -I -X --location --request OPTIONS 'http://mautic.ddev.site/api/contacts/1' \
--header 'Access-Control-Request-Headers: origin, content-type, accept' \
--header 'Origin: http://localhost'

```

 ![image](https://us1.discourse-cdn.com/flex020/uploads/mautic/original/2X/9/9e97cbe21de2f82fce079514c10e75977ae79aed.jpeg)

Hint: If you restrict the CORS domains in the Mautic CORS Settings, also make sure the Origin matches the value specified there.

So this solved my intermediate problem “why I’m not getting the CORS headers when I call the API from the console”. But my original problem in the browser still persists.

If I’m correct then the Mautic code only allows me to set these headers:  
`Origin, X-Requested-With, Content-Type`

> <https://github.com/mautic/mautic/blob/master/app/middlewares/CORSMiddleware.php#L29>

This brings me to the conclusion that the only way to fix this is by changing the code, or the server config? Is there something that I’m missing?

---

<div class="post-metadata">

**Author:** ![krunallathiya](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/krunallathiya/32/3134_2.png) [@krunallathiya](https://forum.mautic.org/u/krunallathiya)\
**Post date:** [August 15, 2020, 4:59am UTC](https://forum.mautic.org/t/how-to-connect-to-mautic-api-from-javascript-with-basic-auth/14238/3 "2020-08-15T04:59:57Z")

</div>

I totally agree with adiux.

Its a feature from the browser that helps us from malicious actors.

CORS is very helpful security feature that make sure that the request is coming from the verified server and not other unverified servers.

You can add your server name or ip to the mautic configuration and this way, you can make sure that only you can access the servers.

You are using [JavaScript fetch()](https://appdividend.com/2018/08/20/javascript-fetch-api-example-tutorial/) so, you can add either authorization headers or change the setting in the mautic api configuration and add your domain there.

Best Regards,