Encounter a 401 error code while attempting to fetch data from CouchDB using an AJAX request

I attempted to make an AJAX call in a JavaScript file to fetch data from CouchDB.

Unfortunately, I encountered a 401 error message:

Failed to load resource: the server responded with a status of 401 (Unauthorized)

This is an extract of my JavaScript code:

var locate_data = $.ajax({
  url: 'http://admin:mypassword@localhost:5984/database_name',
  type:'GET',
  dataType: "json",
  success: function(data){
    console.log("successfully loaded."), 
    alert(data);
  },
  error: function(xhr) {
       console.log("error"), 
       alert(xhr.statusText)
   }
})

I can successfully retrieve the data from CouchDB using 'curl GET' command in the terminal.

What could be causing this problem? And how do you suggest I resolve it?

Answer №1

To enhance security, you have the option to implement Basic access authentication. This involves including a header field in your requests in the format of

Authorization: Basic <credentials>
, where credentials are the encoded username and password using Base64, separated by a single colon ':'.

If you're working with Angular, check out this helpful guide on how to apply the same concept (source). While I don't personally use Ajax, it is likely that the implementation would resemble something like this:

$.ajax({
  url: 'http://localhost:5984/database_name',
  type:'GET',      
  headers: {
    'Accept': 'application/json',
    'Content-type': 'application/json',
    'Authorization': 'Basic ' + btoa("<username>:<password>")
  },
  xhrFields: {
      withCredentials: true
  },
  ...

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

After the child promise is resolved, have the parent function return a boolean value

I am currently faced with a challenge in my framework where the parent function must output either true or false>. However, I also need to perform an asynchronous operation within that function.</p> <p>How can I ensure that the parent functi ...

An improved method for fetching data from the server at regular intervals of x minutes

Is setInterval the best way to periodically check for updates in a database and update the UI accordingly, or are there better approaches that I should consider? I've read conflicting opinions on using setInterval for this purpose, with some sources ...

React component failing to update when props change

After loading correctly, my react component fails to re-render when props change. Despite the fact that render() is being called and the list array contains the correct data according to console.log(list), the page does not refresh. Adding a setState in co ...

Animating background color change with scroll in React using fade effect

Can someone help me with implementing a fading animation for changing the background color on scroll in React? I have successfully achieved the background change effect, but I'm struggling to incorporate the fading effect. import React from "reac ...

Preserve data across all pages using sessions

On my website, I have a pagination system where each page displays 10 data entries. Whenever a user clicks on the pagination buttons, it triggers a request to the database to fetch the corresponding records. Each data entry also includes a button that can ...

Displaying a facebox modal window following an asynchronous request

Within the head tags of my HTML page, I have included the necessary code to load the Facebox plugin: <!-- Code for the Facebox plugin setup --> <link href="<?php echo base_url();?>styles/facebox/src/facebox.css" media="screen" rel="styleshe ...

What is the best way to include a JavaScript variable in an HTML image src tag?

Even though I know the answer to this question is out there somewhere, I just can't seem to find it (or maybe I'm not recognizing it when I see it!). As a beginner in jquery, please be patient with me. Dilemma: I have a collection of 20 images, ...

Using Javascript to emphasize Ajax Response

I am faced with a challenge of highlighting specific words within text received from an ajax response, before generating HTML code and inserting it into the DOM. At the moment, I am utilizing the following code snippet: function highlightWords(line, word, ...

Is it possible to store dat.gui presets for controls that are dynamically added?

I have a dynamic dat.gui interface where I add controls, but the "save settings" feature doesn't seem to recognize them. var mygui = new dat.GUI(); mygui.remember(mygui); // Example of adding a control in the standard way mygui.control1 = 0.0; var c ...

Send nodejs express static request over to secure https server

Is there a way to ensure all HTTP requests, including those for static files, are redirected to HTTPS? This is the code I currently have: app.use(express.static(__dirname + '/public')); app.get('*', function(req, res) { if (!req. ...

In Laravel, Inertia.js will automatically close a modal if there are no validation errors present

Here is the method I am currently using: methods: { submit() { this.$inertia.post('/projects', this.form); this.openModal = false; }, }, Unfortunately, this method closes the modal even if there are validation erro ...

Using jQuery to access a server-side SQL database through PHP

After searching for an example on connecting a client to a server's SQL database using JQuery, AJAX, and PHP, I came across this seemingly well-executed guide: Example Link. All my PHP files and the jQuery library (javascript-1.10.2.min.js) are contai ...

How can AngularJS handle multiple routes using unique templates while sharing the same controller?

I am currently researching whether I can achieve the functionality described in the title. Here are my initial thoughts: Let's consider the following routes I have set up: .when('/', { templateUrl : 'partials/homepage.html&ap ...

Why is Node.js unable to locate my files?

I'm currently utilizing Node.js as my server, and I'm encountering some difficulties in serving my JS and CSS files. For some reason, index.html is unable to locate them. Whenever I try to load up my browser, I encounter the following error: htt ...

Is there a way to retrieve random data based on either product id or slug within a single component using useQuery? Currently, all components are displaying the same data

Here is the code I wrote: const fetchCartItem = async () => { if (token) {const {data } = await axios.get(API.GET_PRODUCT_DETAILS_BY_PRODUCT_ID.replace("[ProductID]",item?.ProductID),{headers:{Authorization: token,},});setCartLoading(fal ...

Leveraging Node.js to fetch data from a third-party website API using JSON

This particular code is currently not functioning properly as it is unable to retrieve an address from an external website We need the "result" value that is present in that json file. Is there a straightforward solution for this issue, such as enabling ...

Unable to observe modifications in json file within java project (jsp)

I am currently using IntelliJ IDEA to develop a web project with JSP. I retrieve data from a file called "customer.json", and when I click on a button, I update this file in the backend. However, after trying to fetch the updated data again, it still reads ...

Collaborative Artistry: Using HTML5, JavaScript, and Node.js for Multiplayer

Creating a multiplayer drawing application for touch-enabled devices has been a challenge. I have utilized Node.js with Socket.io to draw points on a canvas, but there's an issue with the touchend event not resetting properly. To illustrate, take a l ...

Clicking in Javascript can hide the scroll and smoothly take you to the top of the page

For my website, I found this useful tool: It's been working great for me, but one issue I've encountered is that when I click on a picture using the tool, its opacity changes to 0 but the link remains in the same spot. I'm trying to figure ...

The browser is struggling to interpret the incorrect HTML content

I am looking for a way to create a function that can retrieve account data from my database and organize it in a user-friendly HTML table where users can make selections and modifications. The code I have so far is as follows: $.ajax({ url: "./dat ...