Vue使用Vue-Recoure http-proxy-中间件Vuex 有望实现基本的跨域请求封装

使用vue init webpack用您的项目名称初始化vue项目

安装依赖项NPM install vue-resource http-proxy-中间件vuex KOA在main.js中引入并注册下载依赖项，在vue实例中注册从' vue-resou '导入vue资源rce' //用于请求接口Vue.use(VueResource)//。打开后，请求会被发送到application/x-www-form-URL encoded的后台MIME类型表单，就像一个普通的html表单一样，而不是JSON vue.http.options .仿真JSON=true创建一个与main.js文件相同级别的存储文件夹来存储vuex文件

在store文件夹中创建一个index.js的文件(vue会在搜索时自动找到这个文件)，在文件中创建一个store实例并导出它

从“vue”导入vue从“vuex”导入vuex“导入操作从”。/actions//这里，为了扩展性，创建了一个单独的文件来存储请求方法vue . use(VueX)；//对于请求的隧道操作，只导入了actions export default new vuex . store({ actions })；在store文件夹中创建一个actions.js文件来存储请求方法

配置请求代理

在config文件夹下创建一个host.js文件来存储开发、测试和生产的请求地址ip

在文件中，可以根据条件配置是开发还是测试，是正式环境

让HostType=0；//用于判断当前是什么环境让Host={ }；//用于存储当前环境的请求ipif(主机类型==0){主机={//对象中的字段可以自定义。如果整个项目只有一个背景地址，只需要一个字段。AP : ' 127 . 0 . 0 . 1:9000 '，base: ' '，fileup : ' ' } } else if(HostType==1){ Host=}.} } else if(HostType==2){ Host=}.}}模块。导出=主机；

在配置文件夹下创建一个代理表. js文件来存储代理配置

const HOST=require('。/HOST . js ')；module . exports={//interface proxy '/API/text ' : { target : host . API，//需要将代理更改到的地址origin 3360 rue//是否跨域}，/API/demo ' : { target : host . API，changeorigin3360true } }通过代理和注册在config文件夹下创建一个代理中间件. js

//导入插件const代理中间件=require(' http-proxy-中间件')；//导入代理配置常量代理表=require('。/proxy-table’)；//取出配置代理const proxy context=object.keys(代理表)的所有匹配字段；//['/API/text '，'/API/demo']模块. exports=()={//创建默认配置对象const defaututions={ change origin : true。Secure: false} //为什么return是异步方法因为请求代理是由服务器表示的，而koa框架将用于注册这个中间件return async (ctx，Next)={//ctx和Next是koa框架中间件附带的(let context of proxy context)的参数{//Loop key数组if(CTX . url . start with(context))我们得到的{//确定当前请求的URL是否以ctx.respond开头=false//绕过koa框架的内置响应处理让options=proxy table[context]；//如果(选项类型==' string '){ options={ target : options } }//使用Object.assign()方法合并两个对象options=object.assign ({}，默认选项，options)；//注册每个代理，在这里返回一个自执行函数，否则代理不会成功设置代理中间件(context，options) (ctx.req，ctx.res，next)；} } wait next()；}}在项目目录中创建服务启动文件脚本名称定制

//导入脚本文件中我们需要的框架和代理配置文件const Koa=require(' Koa ')；//使用了framework const proxy=require('。/config/proxy-中间件')；//刚刚创建的代理配置文件//创建服务const app=new Koa()；//将代理插件注册到服务上的app . use(proxy())；//因为我们导出了一个方法，所以需要注册//通过调用启动服务app.listen (9000，()={ console . log(' server running at http://127 . 0 . 0 . 1:9000 ')；});//如果不熟悉koa框架，可以使用express框架。如果使用express框架来获取代理，就不必像以前那样使用复杂的编写。const express=require(' express ')；const proxy=require(' http-proxy-中间件')；const app=express()；app . use(express . static(' dist/'))；app.use('/all '，proxy({ target : ' http://127 . 0 . 0 . 1:3000 '，changeOrigin: true，})app . listen(9000，(err)={ if(err)return console . log(err)；console.log('app运行于http://127 . 0 . 0 . 1:9000 ')；})配置代理后，您可以编写request方法，并将request方法写入创建的store文件夹下的actions文件

//从‘vue’导入vue从‘vue’导出默认{//测试接口testinterface ({}，postdata) {//postdata是调用时传入的参数，可以拼接更多的需求。//让ipstr=`/api/text？id=$ { post data . id } `；//返回Vue.http.get(ipstr，{})。然后(响应={ return vue . http . get('/API/text '，{})。然后(response={ if(response . status==200){ return new Promise(response . body)；} else {返回新的Promise(response . data . message)；}})}}测试代理是否成功

Div id=' app '按钮@ click=' clickf '按钮/按钮/div

首先，在脚本标签中导入vuex

从“vuex”导入{ MapActions }；

在方法中创建一个方法来发送请求，并使用方法底部的结构函数来根据需要导入存储在vuex中的请求方法

methods : { ClickF(){ this . TestInterface()。然后(数据={ console.log(数据)；}) },mapActions(['testInterface']) }

您可以使用这个直接访问vuex中的actions方法。方法名称；这里使用了辅助函数，也可以使用原来的方法

在终端中使用节点启动脚本文件的名称或nodemon启动脚本文件的名称

在浏览器中打开服务的地址，然后单击我们创建的按钮来查看请求界面

可以看出，我们的代理已经成功请求；状态为304的原因是，如果请求在第二次请求期间没有改变，将使用浏览器缓存；

上面留下的一个bug是这个方法只适用于构建后的项目；在开发中每次构建无疑是浪费时间。让我们在开发环境中使用服务器代理来完成跨域请求

如果由cli创建的项目直接添加到配置文件夹下的索引文件中的proxyTable。