How to send Basic Auth with axios

Question

I m trying to implement the following code  but something is not working  Here is the code     var session url    http   api address api session endpoint     var username    user     var password    password     var credentials   btoa username         password     var basicAuth    Basic     credentials    axios post session url        headers     Authorization     basicAuth        then function response        console log  Authenticated         catch function error        console log  Error on Authentication            It s returning a 401 error  When I do it with Postman there is an option to set Basic Auth  if I don t fill those fields it also returns 401  but if I do  the request is successful   Any ideas what I m doing wrong   Here is part of the docs of the API of how to implement this      This service uses Basic Authentication information in the header to establish a user session  Credentials are validated against the Server  Using this web-service will create a session with the user credentials passed and return a JSESSIONID  This JSESSIONID can be used in the subsequent requests to make web-service calls

User · Answer

The reason the code in your question does not authenticate is because you are sending the auth in the data object, not in the config, which will put it in the headers. Per the axios docs, the request method alias for post is:

axios.post(url[, data[, config]])

Therefore, for your code to work, you need to send an empty object for data:

var session_url = 'http://api_address/api/session_endpoint';
var username = 'user';
var password = 'password';
var basicAuth = 'Basic ' + btoa(username + ':' + password);
axios.post(session_url, {}, {
  headers: { 'Authorization': + basicAuth }
}).then(function(response) {
  console.log('Authenticated');
}).catch(function(error) {
  console.log('Error on Authentication');
});

The same is true for using the auth parameter mentioned by @luschn. The following code is equivalent, but uses the auth parameter instead (and also passes an empty data object):

var session_url = 'http://api_address/api/session_endpoint';
var uname = 'user';
var pass = 'password';
axios.post(session_url, {}, {
  auth: {
    username: uname,
    password: pass
  }
}).then(function(response) {
  console.log('Authenticated');
}).catch(function(error) {
  console.log('Error on Authentication');
});

User · Answer

I just faced this issue  doing some research I found that the data values has to be sended as URLSearchParams  I do it like this  getAuthToken  async      gt    const data   new URLSearchParams    data append  grant type    client credentials    const fetchAuthToken   await axios     url     PAYMENT URI   PAYMENT GET TOKEN PATH      method   POST     auth        username  PAYMENT CLIENT ID      password  PAYMENT SECRET         headers        Accept   application json        Accept-Language    en US        Content-Type    application x-www-form-urlencoded        Access-Control-Allow-Origin               data    withCredentials  true      return fetchAuthToken

User · Answer

Hi you can do this in the following way var username       var password       const token      username    password    const encodedToken   Buffer from token  toString  base64    const session url    http   api address api session endpoint    var config       method   get     url  session url    headers     Authorization    Basic    encodedToken       axios config   then function  response      console log JSON stringify response data        catch function  error      console log error

User · Answer

For some reasons  this simple problem is blocking many developers  I struggled for many hours with this simple thing  This problem as many dimensions    CORS  if you are using a frontend and backend on different domains et ports  Backend CORS Configuration Basic Authentication configuration of Axios   CORS  My setup for development is with a vuejs webpack application running on localhost 8081 and a spring boot application running on localhost 8080  So when trying to call rest API from the frontend  there s no way that the browser will let me receive a response from the spring backend without proper CORS settings  CORS can be used to relax the Cross Domain Script  XSS  protection that modern browsers have  As I understand this  browsers are protecting your SPA from being an attack by an XSS  Of course  some answers on StackOverflow suggested to add a chrome plugin to disable XSS protection but this really does work AND if it was  would only push the inevitable problem for later   Backend CORS configuration  Here s how you should setup CORS in your spring boot app   Add a CorsFilter class to add proper headers in the response to a client request  Access-Control-Allow-Origin and Access-Control-Allow-Headers are the most important thing to have for basic authentication       public class CorsFilter implements Filter             Override     public void doFilter ServletRequest servletRequest  ServletResponse servletResponse  FilterChain filterChain  throws IOException  ServletException           HttpServletResponse response    HttpServletResponse  servletResponse          HttpServletRequest request    HttpServletRequest  servletRequest           response setHeader  Access-Control-Allow-Origin    http   localhost 8081            response setHeader  Access-Control-Allow-Methods    GET  HEAD  POST  PUT  DELETE  TRACE  OPTIONS  PATCH              response setHeader  Access-Control-Allow-Headers    authorization  Content-Type              response setHeader  Access-Control-Max-Age    3600             filterChain doFilter servletRequest  servletResponse                  Add a configuration class which extends Spring WebSecurityConfigurationAdapter  In this class you will inject your CORS filter    Configuration  EnableWebSecurity public class SecurityConfig extends WebSecurityConfigurerAdapter            Bean     CorsFilter corsFilter             CorsFilter filter   new CorsFilter            return filter              Override     protected void configure HttpSecurity http  throws Exception            http addFilterBefore corsFilter    SessionManagementFilter class    adds your custom CorsFilter            csrf              disable              authorizeRequests              antMatchers   api login              permitAll              anyRequest              authenticated              and              httpBasic              authenticationEntryPoint authenticationEntryPoint             and              authenticationProvider getProvider                   You don t have to put anything related to CORS in your controller    Frontend  Now  in the frontend you need to create your axios query with the Authorization header    lt  DOCTYPE html gt   lt html lang  en  gt   lt head gt       lt meta charset  UTF-8  gt       lt title gt Title lt  title gt       lt script src  https   unpkg com vue  gt  lt  script gt       lt script src  https   unpkg com axios dist axios min js  gt  lt  script gt   lt  head gt   lt body gt   lt div id  app  gt       lt p gt    status    lt  p gt   lt  div gt   lt script gt      var vm   new Vue           el    app           data                status                        created  function                  this getBackendResource                       methods                getBackendResource  function                      this status    Loading                      var vm   this                  var user    aUserName                   var pass    aPassword                   var url    http   localhost 8080 api resource                    var authorizationBasic   window btoa user         pass                   var config                          headers                              Authorization    Basic     authorizationBasic                                                          axios get url  config                       then function  response                            vm status   response data 0                                               catch function  error                            vm status    An error occured     error                                                         lt  script gt   lt  body gt   lt  html gt    Hope this helps

User · Answer

The solution given by luschn and pillravi works fine unless you receive a Strict-Transport-Security header in the response   Adding withCredentials  true will solve that issue     axios post session url        withCredentials  true      headers           Accept    application json          Content-Type    application json                  auth          username   USERNAME         password   PASSWORD        then function response        console log  Authenticated         catch function error        console log  Error on Authentication

User · Answer

If you are trying to do basic auth  you can try this  const username      const password       const token   Buffer from    username    password     utf8   toString  base64    const url    https        const data            axios post url  data      headers      Authorization    Basic   token          This worked for me  Hope that helps

User · Answer

An example  axios example js  using Axios in Node js   const axios   require  axios    const express   require  express    const app   express    const port   process env PORT    5000   app get   search   function req  res        let query   req query queryStr      let url    https   your service org query   query         axios           method  get           url          auth                username   xxxxxxxxxxxxx               password   xxxxxxxxxxxxx                        then function  response            res send JSON stringify response data                catch function  error            console log error                var server   app listen port     Be sure in your project directory you do   npm init npm install express npm install axios node axios example js   You can then test the Node js REST API using your browser at  http   localhost 5000 search queryStr xxxxxxxxx  Ref  https   github com axios axios

User · Answer

There is an  auth  parameter for Basic Auth   auth      username   janedoe     password   s00pers3cret      Source Docs  https   github com mzabriskie axios  Example   await axios post session url          auth        username  uname      password  pass

[request] How to send Basic Auth with axios

Examples related to request

Examples related to postman

Examples related to axios