详解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 相关文章推荐
JQuery实现超链接鼠标提示效果的方法
Jun 10 Javascript
图片旋转、鼠标滚轮缩放、镜像、切换图片js代码
Dec 13 Javascript
Angularjs中三种数据的绑定策略(“@”,“=”,“&”)
Dec 23 Javascript
javascript深拷贝和浅拷贝详解
Feb 14 Javascript
angular4 如何在全局设置路由跳转动画的方法
Aug 30 Javascript
引入JavaScript时alert弹出框显示中文乱码问题
Sep 16 Javascript
详解JSONObject和JSONArray区别及基本用法
Oct 25 Javascript
JavaScript中利用Array filter() 方法压缩稀疏数组
Feb 24 Javascript
angular第三方包开发整理(小结)
Apr 19 Javascript
小程序新版订阅消息模板消息
Dec 31 Javascript
vue-cli3配置favicon.ico和title的流程
Oct 27 Javascript
Vue 组件注册全解析
Dec 17 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
php判断输入不超过mysql的varchar字段的长度范围
2011/06/24 PHP
成为好程序员必须避免的5个坏习惯
2014/07/04 PHP
php  单例模式详细介绍及实现源码
2016/11/05 PHP
php函数式编程简单示例
2019/08/08 PHP
php的命名空间与自动加载实现方法
2019/08/25 PHP
PHP+MySql实现一个简单的留言板
2020/07/19 PHP
关于JavaScript的面向对象和继承有利新手学习
2013/01/11 Javascript
jQuery实现左侧导航模块的显示与隐藏效果
2016/07/04 Javascript
JSON 数据详解及实例代码分析
2017/01/20 Javascript
详解Angularjs在控制器(controller.js)中使用过滤器($filter)格式化日期/时间实例
2017/02/17 Javascript
JavaScript中值类型和引用类型的区别
2017/02/23 Javascript
利用Angular+Angular-Ui实现分页(代码加简单)
2017/03/10 Javascript
vue一步步实现alert功能
2017/07/05 Javascript
手把手教你用Node.js爬虫爬取网站数据的方法
2018/07/05 Javascript
微信小程序实现点击空白隐藏的方法示例
2019/08/13 Javascript
python实现汉诺塔方法汇总
2016/07/25 Python
详解python函数传参是传值还是传引用
2018/01/16 Python
为什么str(float)在Python 3中比Python 2返回更多的数字
2018/10/16 Python
Python数据可视化之画图
2019/01/15 Python
Python提取转移文件夹内所有.jpg文件并查看每一帧的方法
2019/06/27 Python
pandas计算最大连续间隔的方法
2019/07/04 Python
python调用webservice接口的实现
2019/07/12 Python
django+echart数据动态显示的例子
2019/08/12 Python
python中怎么表示空值
2020/06/19 Python
pytorch Dataset,DataLoader产生自定义的训练数据案例
2021/03/03 Python
HTML5在IE10、火狐下中文乱码问题的解决方法
2013/11/18 HTML / CSS
Html5原创俄罗斯方块(基于canvas)
2019/01/07 HTML / CSS
extern在函数声明中是什么意思
2014/01/19 面试题
企业办公室主任岗位职责
2014/02/19 职场文书
另类冲刺标语
2014/06/24 职场文书
纪检干部个人对照检查材料
2014/09/23 职场文书
领导干部考核评语
2015/01/04 职场文书
公司借条范本
2015/05/25 职场文书
感恩教育主题班会
2015/08/12 职场文书
详解Html5项目适配系统深色模式方案总结
2021/04/14 HTML / CSS
Win11安装受阻怎么办? Windows11安装问题与解决方案汇总
2021/11/21 数码科技