详解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 相关文章推荐
浅谈tudou土豆网首页图片延迟加载的效果
Jun 23 Javascript
jquery 插件学习(四)
Aug 06 Javascript
javascript中的绑定与解绑函数应用示例
Jun 24 Javascript
jquery使用jquery.zclip插件复制对象的实例教程
Dec 04 Javascript
javascript中window.open在原来的窗口中打开新的窗口(不同名)
Nov 15 Javascript
如何快速上手Vuex
Feb 14 Javascript
基于vue实现网站前台的权限管理(前后端分离实践)
Jan 13 Javascript
vue2.0组件之间传值、通信的多种方式(干货)
Feb 10 Javascript
微信小程序实现语音识别转文字功能及遇到的坑
Aug 02 Javascript
js判断一个对象是数组(函数)的方法实例
Dec 19 Javascript
js最全的数组的降维5种办法(小结)
Apr 28 Javascript
Vue router配置与使用分析讲解
Dec 24 Vue.js
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
让你的WINDOWS同时支持MYSQL4,MYSQL4.1,MYSQL5X
2006/12/06 PHP
php删除页面记录 同时刷新页面 删除条件用GET方式获得
2012/01/10 PHP
php实现比较两个字符串日期大小的方法
2015/05/12 PHP
详解PHP编码转换函数应用技巧
2016/10/22 PHP
Laravel框架Eloquent ORM修改数据操作示例
2019/12/03 PHP
phpQuery采集网页实现代码实例
2020/04/02 PHP
深入解析PHP底层机制及相关原理
2020/12/11 PHP
jquery 倒计时效果实现秒杀思路
2013/09/11 Javascript
JS获取月的最后一天与JS得到一个月份最大天数的实例代码
2013/12/16 Javascript
js jquery分别实现动态的文件上传操作按钮的添加和删除
2014/01/13 Javascript
JavaScript实现拖拽网页内元素的方法
2015/04/15 Javascript
详解JavaScript中void语句的使用
2015/06/04 Javascript
jQuery的position()方法详解
2015/07/19 Javascript
利用vue实现模态框组件
2016/12/19 Javascript
webstorm中vue语法的支持详解
2018/05/09 Javascript
使用JavaScript实现node.js中的path.join方法
2018/08/12 Javascript
微信小程序实现工作时间段选择
2019/02/15 Javascript
vue配置接口域名方法总结
2019/05/12 Javascript
Ajax请求时无法重定向的问题解决代码详解
2019/06/21 Javascript
基于JS实现视频上传显示进度条
2020/05/12 Javascript
jQuery 隐藏/显示效果函数用法实例分析
2020/05/20 jQuery
跟老齐学Python之通过Python连接数据库
2014/10/28 Python
Python函数的周期性执行实现方法
2016/08/13 Python
Python简单实现安全开关文件的两种方式
2016/09/19 Python
Python函数返回不定数量的值方法
2019/01/22 Python
用Python爬取QQ音乐评论并制成词云图的实例
2019/08/24 Python
使用Tensorboard工具查看Loss损失率
2020/02/15 Python
Gucci法国官方网站:意大利奢侈品牌
2018/07/25 全球购物
什么是事务?为什么需要事务?
2012/01/09 面试题
计算机大学生职业生涯规划书范文
2014/02/19 职场文书
《闻一多先生的说和做》教学反思
2014/04/28 职场文书
营销学习心得体会
2014/09/12 职场文书
教师群众路线教育实践活动学习笔记
2014/11/05 职场文书
劳资员岗位职责
2015/02/13 职场文书
2015年高中班主任工作总结
2015/04/30 职场文书
JS异步堆栈追踪之为什么await胜过Promise
2021/04/28 Javascript