详解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高级程序设计 读书笔记之十一 内置对象Global
Mar 07 Javascript
JS this作用域以及GET传输值过长的问题解决方法
Aug 06 Javascript
简易的投票系统以及js刷票思路和方法
Apr 07 Javascript
简介JavaScript中的setTime()方法的使用
Jun 11 Javascript
JS建造者模式基本用法实例分析
Jun 30 Javascript
jQuery带进度条全屏图片轮播特效代码分享
Jun 28 Javascript
jQuery事件处理的特征(事件命名机制)
Aug 23 Javascript
在 Angular 中实现搜索关键字高亮示例
Mar 21 Javascript
vue组件中使用iframe元素的示例代码
Dec 13 Javascript
JavaScript解析及序列化JSON的方法实例分析
Jan 04 Javascript
JavaScript"模拟事件"的注意要点详解
Feb 13 Javascript
jQuery轮播图功能制作方法详解
Dec 03 jQuery
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
老机欣赏|中国60年代精品收音机
2021/03/02 无线电
PHP+jQuery 注册模块的改进(一):验证码存入SESSION
2014/10/14 PHP
PHP实现UTF-8文件BOM自动检测与移除实例
2014/11/05 PHP
laravel5.1框架model类查询的实现方法
2019/10/08 PHP
神奇的代码 通杀各种网站-可随意修改复制页面内容
2008/07/17 Javascript
jQuery Tips 为AJAX回调函数传递额外参数的方法
2010/12/28 Javascript
Mac/Windows下如何安装Node.js
2013/11/22 Javascript
使用firebug进行调试javascript的示例
2013/12/16 Javascript
jQuery封装的tab选项卡插件分享
2015/06/16 Javascript
JS基于myFocus库实现各种功能的tab选项卡切换效果
2015/09/19 Javascript
Jquery Ajax Error 调试错误的技巧
2015/11/20 Javascript
JS函数的几种定义方式分析
2015/12/17 Javascript
JS中对象与字符串的互相转换详解
2016/05/20 Javascript
javascript实现页面滚屏效果
2017/01/17 Javascript
Angular 5.0 来了! 有这些大变化
2017/11/15 Javascript
node全局变量__dirname与__filename的区别
2019/01/14 Javascript
WebGL学习教程之Three.js学习笔记(第一篇)
2019/04/25 Javascript
fastadmin中调用js的方法
2019/05/14 Javascript
[04:23]DOTA2上海特锦赛小组赛第一日 TOP10精彩集锦
2016/02/27 DOTA
浅析Python多线程下的变量问题
2015/04/28 Python
详解Python中用于计算指数的exp()方法
2015/05/14 Python
巧用python和libnmapd,提取Nmap扫描结果
2016/08/23 Python
CentOS中升级Python版本的方法详解
2017/07/10 Python
对PyQt5基本窗口控件 QMainWindow的使用详解
2019/06/19 Python
python numpy 反转 reverse示例
2019/12/04 Python
python标识符命名规范原理解析
2020/01/10 Python
区域总监的岗位职责
2013/11/21 职场文书
水果超市创业计划书
2014/01/27 职场文书
怎样填写就业意向
2014/04/02 职场文书
财务情况说明书范文
2014/05/06 职场文书
中药学自荐信
2014/06/15 职场文书
民族精神月活动总结
2014/08/28 职场文书
党员批评与自我批评发言材料
2014/10/14 职场文书
银行求职自荐信范文
2015/03/04 职场文书
春节晚会开场白
2015/05/29 职场文书
生日宴会祝酒词
2015/08/10 职场文书