详细解释vue webpack express中间件接口的使用

环境：vue 2 . 9 . 3；工具

目的：调用接口

跨域模式：

1.快递的使用

2.nginx代理

3.Google浏览器跨域设置

分界线。

快速中间件-不推荐

原理：本地代码请求-快速中间件(处理，添加头后转发)-服务器

快递中间件医疗

本地代码文件目录

# # # # # #

在服务器中间件中配置medical/routes/home.js，无需新建home.js //可以命名哪个文件。这是主页的界面。

home.js

var express=require(' express ')；var路由器=express。路由器()；var http=require(' ykt-http-client ')；//中间件的客户端参数存储在req.bdoy/* getuser listing中。*/varcomm=require('./public/js/constant ')；//这里是定义服务器var ip=comm.IP的地址；常数IP=通信IP；router.get('/')，function (req，res，next) { res.send('用资源响应')；});//获取通道router.post ('/aa '，函数(req，RES) {http.post (IP' AAAA '，req.body)。然后((数据)={//console.log (JSON.strict(数据))res.send(数据)；})});//主页这是接口router.post ('/main '，function (req，RES){ http . post(IP '/xhms/rest/interfacelogincontroller/get menu '，req.body，req.headers)。然后((数据)={ console . log(IP '/xhms/rest/interfacesLoginController/getMenu ')；res.send(数据)；})});上面需要定义常量. js的ip

就这样定义吧。

# # # # # # # # #在服务器中间的app.js中引用

添加var home=require('。/routes/home’)；

然后使用app.use('/home '，home)；

# # # # # #这没问题，你可以调用这个接口

created(){ this . GetMune()；}，methods : { GetMune(){ var params=new Object()；Axios.post(此处使用了用于登录的this.ip'/home/main '，params，{ headers : { ' x-auth-token ' : this.token//token，需要在下面进行配置}})。然后((RES)={var data=res.data. if(！data) { console.log(数据)；localStorage.setItem('nume '，JSON.stringify(data.data[0])。儿童))；} else { return false} }，(err)={ console . log(err)；})} # # # # #因为上面使用了头中的X-AUTH-TOKEN，所以需要修改中间件的配置文件，不需要调用服务器中间件就可以直接添加头。

1.当前项目的转移模式

本地代码-服务器中间件-服务器

相当于多用了一层，中间层主要用来解决跨域等其他问题(但比较繁琐)。

如上所示，传递的参数存储在req.body中，传递的头存储在req.headers中。在我们请求接口之后，我们将请求传递给

在ykt-http-client中，目录在medical/node _ modules/ykt-http-client/index.js中，如果只传递参数，没有问题，因为默认情况下原脚本是通过req.body传递的，但是没有req.headers保存的参数，所以需要修改当前的index . js文件。

这样，如果在请求中找到headers参数，它将被传递给服务器以实现目标。

Nginx代理-不推荐

原理和中间差不多，也是通过转发。

谷歌浏览器跨域推荐

参考网站：https://www.jb51.net/softjc/625598.html跨域后

直接通过vue-resource提出请求。

首先安装vue资源

Cnpm安装vue-resource - save，然后在src/main.js中介绍

从“vue-resource”导入VueResourcevue。使用(VueResource)；vue。http。拦截器。push((请求，下一个)={ request。标题。set(' X-AUTH-TOKEN '，本地存储。getitem(' TOKEN ')))//请求。标题。设置('访问控制-允许-来源'，' *)；//请求。标题。设置(“访问控制-允许-标题”、“内容类型”)；//request.headers.set('访问控制-允许-方法、“放、贴、拿、删、选”)；请求。标题。set(' Content-Type '，' application/JSON ')/console。日志(请求。headers)next(响应={//console。日志(响应)返回响应；})})###由于使用了浏览器跨域设置，这里面不需要设置什么。

###使用的话直接在各个位置使用即可

var参数=新对象();//定义的参数参数。id=' 1；//设置id=1这个$ http。贴吧(这个。IP '/xhms/rest/inter remote report controller/v1/getKnowledge '，params，{ header s : { ' X-AUTH-TOKEN ' : this。TOKEN//定义的表头根据需要自行添加} }).然后((RES)={ var data=JSON。解析(RES . data)；if(！数据数据。status==' 1 '){//$。fn。ztree。init($(' #虞书选择')，this.shuyusetting，data。数据)；} else { return false} }，(err)={ console。日志(err)；});-由于刚刚接触vue，使用过程中也是绕了很多圈子，难受。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。