我试图实现以下代码，但有些东西是不工作的。代码如下:
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错误。当我用邮差做的时候，有一个选项可以设置基本认证;如果我没有填写这些字段，它也会返回401，但如果我填写了，请求就成功了。
知道我哪里做错了吗?
下面是如何实现这个API的部分文档:
该服务使用头部中的基本身份验证信息来建立用户会话。凭据根据服务器进行验证。使用这个web服务将使用传递的用户凭证创建一个会话，并返回一个JSESSIONID。这个JSESSIONID可以在后续请求中使用，以进行web服务调用
在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
问题中的代码没有进行身份验证的原因是您在数据对象中发送身份验证，而不是在配置中发送，配置将把它放在报头中。根据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');
});
我使用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();
}
}
