如何使用axios发送Basic Auth

Question

我正在尝试实现以下代码,但有些东西不起作用.这是代码:

  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');
  });

它返回401错误.当我使用Postman执行此操作时,可以选择设置Basic Auth; 如果我没有填写这些字段,它也会返回401,但如果我这样做,则请求成功.

我有什么想法我做错了吗？

以下是如何实现此API的API文档的一部分:

此服务使用标头中的基本身份验证信息来建立用户会话.凭据将根据服务器进行验证.使用此Web服务将创建一个会话,其中包含传递的用户凭据并返回JSESSIONID.此JSESSIONID可用于后续请求以进行Web服务调用.*

Answer 1

Basic Auth有一个"auth"参数:

auth: {
    username: 'janedoe',
    password: 's00pers3cret'
}

来源/文件:https://github.com/mzabriskie/axios

Answer 2

您的问题中的代码未进行身份验证的原因是您在数据对象中而不是在配置中发送auth,这将把它放在标头中.每Axios公司文档,所述请求方法别名为post是:

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

因此,要使代码正常工作,您需要为数据发送一个空对象:

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');
});

使用@luschn提到的auth参数也是如此.以下代码是等效的,但使用auth参数代替(并传递空数据对象):

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');
});

Answer 3

您好，您可以通过以下方式执行此操作

    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);
    });

Answer 4

由于某些原因，这个简单的问题阻碍了许多开发人员。我在这件简单的事情上挣扎了好几个小时。这个问题有很多维度：

1. CORS（如果您在不同的域和端口上使用前端和后端。
2. 后端 CORS 配置
3. Axios 的基本认证配置

CORS

我的开发设置是使用在 localhost:8081 上运行的 vuejs webpack 应用程序和在 localhost:8080 上运行的 Spring Boot 应用程序。因此，当尝试从前端调用 rest API 时，如果没有正确的 CORS 设置，浏览器将无法让我从 spring 后端接收响应。CORS 可用于放松现代浏览器具有的跨域脚本 (XSS) 保护。据我了解，浏览器正在保护您的 SPA 免受 XSS 攻击。当然，StackOverflow 上的一些答案建议添加一个 chrome 插件来禁用 XSS 保护，但这确实有效，如果有效，只会将不可避免的问题推到以后。

后端 CORS 配置

以下是在 Spring Boot 应用程序中设置 CORS 的方法：

添加 CorsFilter 类以在对客户端请求的响应中添加适当的标头。Access-Control-Allow-Origin 和 Access-Control-Allow-Headers 是基本身份验证最重要的东西。

    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);

    }
...
}

添加一个扩展 Spring WebSecurityConfigurationAdapter 的配置类。在本课程中，您将注入 CORS 过滤器：

@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());
    }
...
}

您不必在控制器中放入任何与 CORS 相关的内容。

前端

现在，在前端，您需要使用 Authorization 标头创建 axios 查询：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
    <p>{{ status }}</p>
</div>
<script>
    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;
                    })
            }
        }
    })
</script>
</body>
</html>

希望这可以帮助。

Answer 5

luschn 和pilravi 给出的解决方案工作正常，除非您在响应中收到Strict-Transport-Security标头。

添加withCredentials: true将解决该问题。

  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');
  });

Answer 6

如果您正在尝试进行基本身份验证，则可以尝试以下操作：

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}`
},
})

这对我有用。希望有帮助