我使用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;

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

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

我只是面对这个问题，做了一些研究，我发现数据值必须作为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;

},

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

CORS(如果你在不同的域和端口上使用前端和后端。 后端CORS配置 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.

后端CORS配置

以下是在春季启动应用程序中设置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>

希望这能有所帮助。

基本认证有一个“auth”参数:

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

来源/ Docs: https://github.com/mzabriskie/axios

例子:

await axios.post(session_url, {}, {
  auth: {
    username: uname,
    password: pass
  }
});

问题中的代码没有进行身份验证的原因是您在数据对象中发送身份验证，而不是在配置中发送，配置将把它放在报头中。根据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');
});