vue.js使用http-proxy-middleware解决跨域请求问题
来源:互联网 发布:html data属性 js 编辑:程序博客网 时间:2024/05/16 13:09
最近在使用vue-cli搭建项目的过程中,遇到了跨域请求数据的问题,这里贴出我的解决方法,希望对大家有所帮助。
什么是跨域请求:
如果在A网站中,我们希望使用Ajax来获得B网站中的特定内容,如果A网站与B网站不在同一个域中,那么就出现了跨域访问问题。由于浏览器同源策略,凡是发送请求url的协议、域名、端口三者之间任意一与当前页面地址不同即为跨域。
这里,数据请求用的是vue-resource(目前vue官方是推荐使用axios),安装插件:
npm install --save-dev vue-resource
在main.js中引入插件:
import VueResource from 'vue-resource'Vue.use(VueResource)
这里,解决跨域使用的是http-proxy-middleware来进行接口代理,安装方法同上:
npm install --save-dev http-proxy-middleware
下面开始谈正事,举个栗子:
本地项目地址是:localhost:8080,现在我们要访问 http://m.maizuo.com/v4/api/film/comming-soon 和 http://m.maizuo.com/v4/api/billboard/home 这两个线上地址:
首先,设置build/dev-server.js:
var proxyMiddleware = require('http-proxy-middleware')var server = express()server.middleware = [ proxyMiddleware(['/film/coming-soon'], {target: 'http://m.maizuo.com/v4/api', changeOrigin: true}), proxyMiddleware(['/billboard/home'], {target: 'http://m.maizuo.com/v4/api', changeOrigin: true})];server.use(server.middleware);
注意,当要访问多个线上地址时,公共的地址部分写在target属性值里面,比如这里的 http://m.maizuo.com/v4/api ,然后[ ]里边写地址的不同部分。
然后,修改config/index.js :
dev: { env: require('./dev.env'), port: 8080, proxyTable: { '/api': { target: 'http://m.maizuo.com/v4/api', changeOrigin: true, pathRewrite: { '^/api': '' } } } }
这里的target同上面的一样,然后’/api’和’^/api’代表的就是这个根目录地址;
然后,在页面中具体的调用为:
this.$http.get('api/billboard/home').then((response) => {});
这里,url的值为api + [ ] 中的部分 ;
然后,我们就解决了vue中的跨域问题 ;
这里,贴一下http-proxy-middleware插件的github地址,看更多用法 :
https://github.com/chimurai/http-proxy-middleware
- vue.js使用http-proxy-middleware解决跨域请求问题
- 使用http-proxy-middleware解决前端开发中跨域的问题
- 关于vue2.x使用axios以及http-proxy-middleware代理处理跨域的问题
- http-proxy-middleware
- npm模块之http-proxy-middleware使用教程(译)
- npm模块之http-proxy-middleware使用教程(译)
- npm模块之http-proxy-middleware使用教程(译)
- web开发时,使用django-cors-middleware解决django的跨域问题
- vuejs中vue-resource或使用axios发送请求及解决跨域问题
- HTTP请求跨域问题,解决模棱两可。
- Vue用axios请求数据proxyTable解决跨域问题
- vue.js使用代理和使用Nginx来解决跨域问题
- vue.js使用axios实现跨域请求
- node+express+http-proxy-middleware代理转发
- nodejs之http-proxy-middleware应用
- iOS解决http请求不能使用问题
- Vue.js代理设置解决跨域问题
- gulp-connect-proxy和http-proxy-middleware代理
- Image组件简介
- INSTALL_FAILED_DUPLICATE_PERMISSION
- 配置HTTPS服务器之Tomcat
- 彻底解决高版本 mac Kernel_task占CPU问题
- 原生JS楼层导航
- vue.js使用http-proxy-middleware解决跨域请求问题
- The Apache Tomcat Connectors
- java的String及StringBuffer的常用方法
- C#发送QQ邮件和GMAIL邮件
- java工程师面试技巧
- 自己的web项目导入eclipse中,jsp页面里的内容却报错时
- springMVC学习笔记
- java的jdk动态代理简单封装
- 第八章 函数进阶和按键(2)