目录1.创建Vue项目2.安装axiOS3.进行config.js配置4.main.js里引入5.src目录下新建Utils文件夹,在内封装request.js6.以login路由为
vue create demo
demo是项目名称
进入demo里面打开终端(黑窗口),执行
npm install axios
devServer: {
host: "0.0.0.0", // 是否可以被覆盖
port: 8090, // 配置本地端口号
open: true,
//解决跨域问题
proxy: {
// 正式
"/api": {
target: "Http://IP地址:端口号/",
changeOrigin: true,
secure: false, // 如果是https接口,需要配置这个参数
pathRewrite: {
"^/api": "",
},
},
},
},
},
//http封装请求
import axios from "axios";
axios.defaults.baseURL = "/api";
axios.defaults.headers = //公共携带请求头
//大部分是 "Content-Type:application/JSON;charset=UTF-8"
axios.defaults.withCredentials = true;
import axios from "axios";//引入axios
const request = axios.create({//进一步封装axios
baseURL: "/api",//配置跟路由
timeout: 5000,//配置请求超时时间
});
//添加请求拦截器
request.interceptors.request.use(function (config) {}
//添加响应拦截器
request.interceptors.request.use((res) => {
return res;
}),
(err) => {
return Promise.reject(err);
};
export default request;
//暴露出去
import request from "@/utils/request"; // 引入request
// 登录
export const UserLogin = (params) => {//封装login请求
return request({
url: "/login",//请求地址
method: "post",//请求方式
data: params,//请求体
});
};
简单明了
到此这篇关于Vue项目的网络请求代理到封装步骤详解的文章就介绍到这了,更多相关Vue网络请求代理到封装内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!
--结束END--
本文标题: Vue项目的网络请求代理到封装步骤详解
本文链接: https://www.lsjlt.com/news/211726.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0