vue设置Authorization 后端无论如何都取值取不到
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
·
如下图所示
前端如下图所示

后端如下图所示


看请求发现发送了两次

综上所述可能时配置代理时候出问题了。
vue.config.js
const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
transpileDependencies: true,
devServer: {
port: 8888,
//设置是否启动时打开浏览器
open: true,
//设置代理
proxy: {
//代理的根路径
"/": {
//是都开启ws
ws: false,
//代理的后端的路径
target: "http://localhost:8000/", //这里填入你要请求的接口的前缀
//是否开启路径转换
changeOrigin: true, //虚拟的站点需要更管origin
//代理路径更改
pathRewrite: {
"^/": "/", //重写路径
},
},
},
},
});
如果配置了代理类那么就不能在axios中配置baseurl了。
自己封装的axios类
httpCline.js
import axios from "axios";
import { ElMessage } from "element-plus";
问题就在这行没有注解掉
//**axios.defaults.baseURL = "http://localhost:8000";**
axios.defaults.timeout = 10000;
// request 拦截器
// 可以自请求发送前对请求做一些处理
// 比如统一加token,对请求参数统一加密
axios.interceptors.request.use(
(config) => {
// eslint-disable-next-line no-debugger
debugger;
console.log("请求" + config);
// config.headers["Content-Type"] = "application/json;charset=utf-8";
// eslint-disable-next-line no-debugger
let token = sessionStorage.getItem("token");
if (token) {
//给请求头加token
config.headers["Authorization"] = token;
config.headers.Authorization = token;
}
// 设置请求头
return config;
},
(error) => {
return Promise.reject(error);
}
);
// response 拦截器
// 可以在接口响应后统一处理结果
axios.interceptors.response.use(
(response) => {
if (response.data.flag === true) {
return Promise.resolve(response);
} else {
return Promise.reject(response);
}
},
(error) => {
// eslint-disable-next-line no-debugger
console.log("异常", error.response);
if (error.response.status === 400) {
ElMessage.error(error.response.data.message);
} else if (error.response.status === 401) {
ElMessage.error("您未登录,请登陆后操作");
} else if (error.response.status === 403) {
ElMessage.error(error.response.data.message);
} else if (error.response.status === 404) {
ElMessage.error("后端端口未找到!");
} else if (error.response.status === 500) {
ElMessage.error("后端端口异常!--》" + error.response.data.message);
} else {
ElMessage.error("未知错误");
}
const errorMsg = JSON.stringify(error);
console.log("请求异常:" + errorMsg);
}
);
export default {
post(uri, data) {
return new Promise((resolve, reject) => {
axios({
method: "post",
url: uri,
data: data,
})
.then((res) => {
resolve(res.data);
})
.catch((err) => {
reject(err);
});
});
},
get(uri) {
return new Promise((resolve, reject) => {
axios({
method: "get",
url: uri,
})
.then((res) => {
resolve(res.data);
})
.catch((err) => {
reject(err);
});
});
},
getTwo(uri, data) {
return new Promise((resolve, reject) => {
axios({
method: "get",
url: uri,
params: data,
})
.then((res) => {
resolve(res.data);
})
.catch((err) => {
reject(err);
});
});
},
};
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:4 个月前 )
9e887079
[skip ci] 1 年前
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 1 年前
AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。
更多推荐



所有评论(0)