详解Vuejs2.0 如何利用proxyTable实现跨域请求


Posted in Javascript onAugust 03, 2017

前言:

本地项目在请求远端服务器接口时,不可避免的会遇到跨域问题,即便是设置了Access-Control-Allow-Origin:* ,在遇到登录这些需要本地存入cookie的也会很头痛,这里笔者介绍一个在vue-cli中配置代理来解决的办法。

在~/config/dev-server.js中 使用了非常强大的http-proxy-middleware 包。更多高级用法,请查阅其文档。

用法:

比如我们要请求的远端服务器为:http://192.168.400:3000

proxyTable: {
   '/api/': {
    target: 'http://192.168.400:3000',
    changeOrigin:true,  //set the option changeOrigin to true for name-based virtual hosted sites
    pathRewrite: {
     '^/api': '/api'
    }
   },
  },
  • 通过设置changeOrigin:true 开启代理
  • pathRewrite 意为重写路径

示例:

比如要请求的接口为http://192.168.400:3000/api/main/getUserInfo.action

this.$http.post('/api/main/getUserInfo.action')
 .then(res=>{
  console.log(res)
 })

后续:

在实际工作中,我们还需要做些其他的,比如在axios中配置baseUrl:

/**
 * Created by Administrator on 2017/4/11.
 */
import axios from 'axios';

// 添加响应拦截器
axios.interceptors.request.use(function (config) {
 // 配置发送请求的信息

 return config;
}, function (error) {
 return Promise.reject(error);
});

axios.interceptors.response.use(function (response) {
 // 配置请求回来的信息

 return response;
}, function (error) {
 return Promise.reject(error);
});

var http = axios.create({
 timeout: 8000, /*设置请求超时时间*/
 baseURL:'http://192.168.400:3000', 

});

// Alter defaults after instance has been created
http.defaults.headers.common['Authorization'] = '';

export default http; 

/**导出http,在mainjs中引用
import http from './config/axiosConfig';
Vue.prototype.$http = http;
**/

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
定义JavaScript二维数组采用定义数组的数组来实现
Dec 09 Javascript
js统计页面的来访次数实现代码
May 09 Javascript
JavaScript检测实例属性, 原型属性
Feb 04 Javascript
jQuery标签编辑插件Tagit使用指南
Apr 21 Javascript
JS模拟Dialog弹出浮动框效果代码
Oct 16 Javascript
jquery插件jquery.LightBox.js实现点击放大图片并左右点击切换效果(附demo源码下载)
Feb 25 Javascript
Angular中使用MathJax遇到的一些问题
Dec 15 Javascript
layui select动态添加option的实例
Mar 07 Javascript
vue改变对象或数组时的刷新机制的方法总结
Apr 24 Javascript
Vue之beforeEach非登录不能访问的实现(代码亲测)
Jul 18 Javascript
对vue中的事件穿透与禁止穿透实例详解
Oct 28 Javascript
vuex实现购物车功能
Jun 28 Javascript
react-native ListView下拉刷新上拉加载实现代码
Aug 03 #Javascript
解决ionic和angular上拉加载的问题
Aug 03 #Javascript
ES6学习教程之Map的常用方法总结
Aug 03 #Javascript
微信小程序之电影影评小程序制作代码
Aug 03 #Javascript
Form表单上传文件(type="file")的使用
Aug 03 #Javascript
微信小程序-滚动消息通知的实例代码
Aug 03 #Javascript
es6 字符串String的扩展(实例讲解)
Aug 03 #Javascript
You might like
漫荒推荐:画风超赞的国风漫画推荐 超长假期不无聊
2020/03/08 国漫
对squid中refresh_pattern的一些理解和建议
2009/04/17 PHP
解析php根据ip查询所在地区(非常有用,赶集网就用到)
2013/07/01 PHP
Yii入门教程之Yii安装及hello world
2014/11/25 PHP
Yii2实现ajax上传图片插件用法
2016/04/28 PHP
数理公式,也可以这么唯美
2021/03/10 无线电
IE php关于强制下载文件的代码
2008/08/23 Javascript
js中if语句的几种优化代码写法
2011/03/12 Javascript
JavaScript ECMA-262-3 深入解析.第三章.this
2011/09/28 Javascript
利用jquery包将字符串生成二维码图片
2013/09/12 Javascript
JavaScript遍历table表格中的某行某列并打印其值
2014/07/08 Javascript
jQuery超酷平面式时钟效果代码分享
2020/03/30 Javascript
vuejs指令详解
2017/02/07 Javascript
JS实现按钮控制计时开始和停止功能
2017/07/27 Javascript
Vue动态加载异步组件的方法
2018/11/21 Javascript
[01:15]《辉夜杯》北京网鱼队巡礼
2015/10/26 DOTA
[36:52]DOTA2真视界:基辅特锦赛总决赛
2017/05/21 DOTA
Python比较两个图片相似度的方法
2015/03/13 Python
Python运用于数据分析的简单教程
2015/03/27 Python
对Python 3.2 迭代器的next函数实例讲解
2018/10/18 Python
python自动下载图片的方法示例
2020/03/25 Python
Python实现自动打开电脑应用的示例代码
2020/04/17 Python
python sitk.show()与imageJ结合使用常见的问题
2020/04/20 Python
基于HTML5新特性Mutation Observer实现编辑器的撤销和回退操作
2016/01/11 HTML / CSS
Html5实现移动端、PC端 刮刮卡效果
2016/06/30 HTML / CSS
HTML5+CSS3模仿优酷视频截图功能示例
2017/01/05 HTML / CSS
老海军美国官网:Old Navy
2016/09/05 全球购物
奥地利网上书店:Weltbild
2017/07/14 全球购物
YesBabyOnline美国:全球性的在线婚纱礼服工厂
2018/05/05 全球购物
应届生骨科医生求职信
2013/10/31 职场文书
优秀求职信范文分享
2013/12/19 职场文书
敬老院标语
2014/06/27 职场文书
六查六看自查报告
2014/10/14 职场文书
2014年党务工作总结
2014/11/25 职场文书
文艺有韵味的诗句(生命类、亲情类...)
2019/07/11 职场文书
插件导致ECharts被全量引入的坑示例解析
2022/09/23 Javascript