HTTP authentication not working

Hello All,
I am trying to authenticate using the below.

I tried using Postman to check the authentication and it is working. When I try to use the ajax request with jquery it always throws error for OPTIONS call.

Request Method: OPTIONS
Status Code: 404 Not Found

How to solve this issue?

Below is the network tab details for the request

Request URL: http://localhost:3000/api/dashboards
Request Method: OPTIONS
Status Code: 404 Not Found
Remote Address: [::1]:3000
Referrer Policy: no-referrer-when-downgrade
Content-Length: 23
Content-Type: application/json; charset=UTF-8
Date: Tue, 15 May 2018 04:53:37 GMT
Set-Cookie: grafana_sess=c7306fade6fe45ff; Path=/; HttpOnly
Accept: /
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9
Access-Control-Request-Headers: authorization,cache-control
Access-Control-Request-Method: GET
Cache-Control: no-cache
Connection: keep-alive
Host: localhost:3000
Origin: http://localhost
Pragma: no-cache

The OPTIONS call will be a CORS Preflight request because you’re making a cross-domain request via jQuery.

You can resolve this in several different ways, the best way is to use the same arrangement that Grafana does for “proxy” mode where the browser makes a request to a proxy endpoint on the same domain which adds the authentication information and passes the request to the backend server. You can authenticate that request with the same method as for any other requests the front-end makes to your application, avoid exposing the Grafana credentials to the browser, and avoid the CORS issues.

Alternatively you can hosts your Grafana instance at /grafana on the same domain as your app (which will also avoid CORS), or use a reverse proxy in front of Grafana to answer the CORS OPTIONS requests while passing other requests through to Grafana. Both of those methods will still expose the Grafana credentials to the browser however, so they’re not recommended.