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文档的一部分：

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

Answer 1

有一个＆＃34; auth＆＃34; Basic Auth的参数：

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

来源/文档：https://github.com/mzabriskie/axios

Answer 2

您的问题中的代码未进行身份验证的原因是您在数据对象中而不是在配置中发送auth，这将把它放在标头中。根据{{3}}，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

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

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

这对我有用。希望有帮助

Answer 4

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

    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 5

由于某些原因，这个简单的问题阻碍了许多开发人员。这个简单的事情让我挣扎了很多小时。这个问题涉及多个维度：

CORS（如果您在不同的域和端口上使用前端和后端。
后端CORS配置
Axios的基本身份验证配置

CORS

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

后端CORS配置

以下是在春季启动应用中设置CORS的方法：

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

    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 6

我刚遇到这个问题，做了一些研究，我发现数据值必须作为 URLSearchParams 发送，我是这样做的：

getAuthToken: async () => {
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;

},

Answer 7

在Node.js中使用Axios的示例（axios_example.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);

确保在项目目录中执行以下操作：

npm init
npm install express
npm install axios
node axios_example.js

然后，您可以使用浏览器在http://localhost:5000/search?queryStr=xxxxxxxxx

测试Node.js REST API

参考：https://github.com/axios/axios

Answer 8

除非您在响应中收到一个Strict-Transport-Security标头，否则luschn和pillravi给出的解决方案效果很好。

添加 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 9

我使用 axios.interceptors.request.use 来配置基本身份验证凭据。我有一个带有简单 GET 端点的后端 Springboot（带有 SpringSecurity）应用程序。前端 VueJs 应用和后端在不同的端口上运行。

axios.js

import axios from "axios";

const api = axios.create({
  baseURL: "http://api_address",
  timeout: 30000,
});

api.interceptors.request.use(
  async (config) => {
    const basicAuthCredentials = btoa("xxxx" + ":" + "xxxx");
    config.headers.common["Authorization"] = "Basic " + basicAuthCredentials;
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

export default api;

后端.js

import axios from "@/services/axios";

const BackendAPI = {

  listUsers: async () => {
    return axios({
      url: '/users',
      method: 'GET',
      responseType: 'json',
    });
  },
};

export { BackendAPI };

后接VUE组件Users.vue

...
<script>
import { BackendAPI } from '@/services/backend';

export default {
  name: "Users",
  data() {
    return {
      usersList: [],
    }
  },
  methods: {
    async listUsers() {
      const response = await BackendAPI.listUsers();
      this.usersList = response.data;
    },
  },
};
</script>

后端 spring SecurityConfig.java 使用 httpBasic 作为身份验证，并且禁用了 cors 和 csrf。

@Configuration
@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {

  @Override
  protected void configure(HttpSecurity http) throws Exception {
    http.authorizeRequests()
        .antMatchers("/actuator/*")
        .permitAll()
        .anyRequest()
        .authenticated()
        .and()
        .httpBasic()
        .and()
        .cors()
        .disable()
        .csrf()
        .disable();
  }
}

Answer 10

const auth = {
            username : 'test',
            password : 'test'
        }
const response =  await axios.get(yourUrl,{auth})

如果您使用基本身份验证，这是可行的

如何使用axios发送Basic Auth

10 个答案: