发布时间:2022-08-19 12:30
npm install http-proxy-middleware,
npm install axios
// 配置跨域
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function (app) {
app.use(
"/devApi",
createProxyMiddleware({
target: http://xxxxxxxxx, // 服务器请求地址
changeOrigin: true, //允许跨域
pathRewrite: {
"/devApi": '', //替换为空,根据自己项目地址,我这里为空
}
})
);
};
注意一下问题:
1.修改consfig文件夹下paths.js文件 proxySetup的路径指向我们新建的文件: setupProxy.js
2.这里和大家探讨一下setupProxy.js内容,欢迎留言评论
devApi是拦截器里的baseURL 地址拼接上请求接口+浏览器地址 http://localhost:3000/devApi/login/
1.匹配找到devApi 后去做代理 http://xxxxxxxx
2.pathRewrite 讲dveApi 替换成 空内容 /devApi/login/ => /login/
3.替换成之后地址为 http://xxxxxxx/login/
这里给出拦截器request.js文件代码
import axios from "axios" // 引入 axios
// 1、创建实例
const service = axios.create({
baseURL: "/devApi", //不同环境下读取文件变量值
timeout: 3000,
headers: { 'X-Custom-Header': 'foobar' }
});
//2、请求拦截 // 添加请求拦截器
......
// 3、响应拦截 // 添加响应拦截器
......
http://www.axios-js.com/zh-cn/docs/ axios官网地址
api接口给请求代码
//api 请求处理
import service from "../utils/request"; //引入拦截器
// 配置登录接口请求
export function Login(data) {
return service.request({
url: "/login/",
method: "post",
data: data, //post请求
})
}
到此我们就可以做正常的数据请求了,在需要的地方调用接口,就可正常的传递参数了,有什么问题留言评论哦,喜欢的一键三连!!!
错误:org.springframework.web.util.NestedServletException: Handler dispatch failed; nested exception is
OpenCV4学习笔记(72)——ArUco模块之aruco标记的创建与检测
一文带你弄懂C++中的ANSI、Unicode和UTF8三种字符编码
成功解决error: Microsoft Visual C++ 14.0 or greater is required. Get it with “Microsoft C++ Build Tools“
目标检测:较新算法(算法介绍与开源代码)(2022.3.8)
入学计算机水平考试,2017级本科新生计算机水平入学考试要点
Springboot + Vue + shiro 实现前后端分离、权限控制
这Python100道练习题及答案送给你,学完直接上手做项目