郑州免费建站,品牌网站推广软件,建设网站公司那里好相关的热搜问题解决方案,长春建设网站公司哪家好文章目录环境准备vue的跨域问题vue跨域问题解决方案方式一方式二上一篇#xff1a;#xff08;三十五#xff09;Vue之过渡与动画
环境准备
首先我们要借助axios发送Ajax#xff0c;axios安装命令#xff1a;npm i axios
其次准备两台服务器#xff0c;这里使用node.j…
文章目录环境准备vue的跨域问题vue跨域问题解决方案方式一方式二上一篇三十五Vue之过渡与动画
环境准备
首先我们要借助axios发送Ajaxaxios安装命令npm i axios
其次准备两台服务器这里使用node.jsexpress搭建 server1
const express require(express)
const app express()app.use((request,response,next){console.log(有人请求服务器1了);next()
})app.get(/students,(request,response){const students [{id:001,name:tom,age:18},{id:002,name:jerry,age:19},{id:003,name:tony,age:120},]response.send(students)
})app.listen(5000,(err){if(!err) console.log(服务器1启动成功了,请求学生信息地址为http://localhost:5000/students);
})
server2
const express require(express)
const app express()app.use((request,response,next){console.log(有人请求服务器2了);next()
})app.get(/cars,(request,response){const cars [{id:001,name:奔驰,price:199},{id:002,name:马自达,price:109},{id:003,name:捷达,price:120},]response.send(cars)
})app.listen(5001,(err){if(!err) console.log(服务器2启动成功了,请求汽车信息地址为http://localhost:5001/cars);
})
vue的跨域问题
我们知道vue脚手架默认是在localhost8080这个端口运行而我们需要访问上面两台服务器一般来说请求会被CORS策略阻止 divbutton clickgetStudents获取学生信息/buttonbutton clickgetSCars获取汽车信息/button/divgetStudents(){axios.get(http://localhost:5000/students).then(response {console.log(请求成功,response.data)},error {console.log(请求失败,error.message)},getSCars(){axios.get(http://localhost:5001/cars).then(response {console.log(请求成功,response.data)},error {console.log(请求失败,error.message)})})使用node server1.js启动服务器server1 node server2.js启动服务器server2
浏览器正常访问 访问server1 访问server2
vue跨域访问被CORS策略阻止
vue跨域问题解决方案
Ajax跨域问题有很多解决方案在后端解决方案有设置响应头jsonp等等具体参考AJAX跨域问题及解决方案
vue脚手架提供一种解决方案那就是使用代理服务器代理发送请求
发送请求方localhost:8080
那么代理服务器跟发送方保持一致localhost:8080
接收请求方localhost:5000
那么形成
发送请求 发送方8080---代理方8080--转发--接收方5000
响应 接收方5000--响应--代理方8080--转发--发送方8080
根本原因是因为代理服务器8080与服务器5000相互访问是使用http协议这就类似与浏览器访问服务器5000一样方式一
在vue.config.js中添加如下配置 devServer: {proxy: http://localhost:5000 //要跨域域名}getStudents(){/*axios.get(http://localhost:5000/students).then(*///方式一axios.get(http://localhost:8080/students).then(response {console.log(请求成功,response.data)},error {console.log(请求失败,error.message)})}优缺点
优点配置简单请求资源时直接发给前端8080即可。缺点不能配置多个代理不能灵活的控制请求是否走代理。
局限性 若按照上述配置代理当请求了前端不存在的资源时那么该请求会转发给服务器 优先匹配前端资源 例如我在public创建与路径students相同名称的文件夹 那么再次请求学生资源时就会优先匹配文件students的内容
方式二
编写vue.config.js配置具体代理规则
devServer: {proxy: {/api1: {target: http://localhost:5000,//ws: true,//用于支持websocket//changeOrigin: true //用于控制请求头的host值默认为true表示请求头host值为要访问服务器的值我就是你当为false时表示请求头host值为要代理服务器本身的值我就是我pathRewrite: {^/api1: }//重写请求用正则表达式匹配},/api2: {target: http://localhost:5001,pathRewrite: {^/api2: }}}}getStudents(){/*axios.get(http://localhost:5000/students).then(*///方式一/*axios.get(http://localhost:8080/students).then(*///方式二axios.get(http://localhost:8080/api1/students).then(response {console.log(请求成功,response.data)},error {console.log(请求失败,error.message)})},getSCars(){axios.get(http://localhost:8080/api2/cars).then(response {console.log(请求成功,response.data)},error {console.log(请求失败,error.message)})}优缺点
优点可以配置多个代理且可以灵活的控制请求是否走代理。缺点配置略微繁琐请求资源时必须加前缀。
