我试图实现以下代码，但有些东西是不工作的。代码如下:
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
我只是面对这个问题，做了一些研究，我发现数据值必须作为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;
},
我使用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();
}
}
