vue代理和跨域问题的解决


Posted in Javascript onJuly 18, 2018

一、安装vue-resource插件

cnpm install vue-resource --save

在根目录下的package.json检查一下插件的版本

vue代理和跨域问题的解决

在rourer-index.js下引入文件

import Resource from 'vue-resource'
Vue.use(Resource)

引入vue-resource后,可以基于全局的Vue对象使用http,也可以基于某个Vue实例使用http 参考链接

二、安装axios插件

cnpm install --save axios

在后台服务文件(server.js)中引入

var axios = require('axios')

新建一个公共Js文件,用于存放httpserver

vue代理和跨域问题的解决

import axios from 'axios' // 引入axios插件
export function getHttp (url, callFun) { //get请求方法
  axios.get(url).then(callFun)
  .catch(function(err){
    console.log(err)
  })
}

三、proxy代理

config-index.js文件下找到proxyTable设置代理

例如我的vue项目链接是 localhost:8080 后台数据地址是 localhost:8081/api/seller(端口不一样)

proxyTable: {
   '/api': {
    target: 'http://localhost:8081',
    changeOrigin: true,
    pathRewrite: {
     '^/api': '/api' // pathRewrite方法重写url, 这样配置出来的url为http://localhost:8081/api/seller
     // '^/api': '/' // pathRewrite方法重写url, 这样配置出来的url为http://localhost:8081/seller
    }
   }
  }

四、数据调用

在想调用数据的vue页面中写入如下代码

js部分

<script>
import {getHttp} from '../static/js/httpserver.js'
export default {
 data () {
  return {
   seller: {}
  }
 },
 methods: {
  shangjia: function () {
   let url = '/api/seller'
   getHttp(url, function (res) {
    res = res.data
    console.log(res)
   })
  }
 }
}
</script>

html部分

<template>
<div id="app">
 <div @click='shangjia()'><router-link to='/seller'>商家</router-link></div>
<router-view></router-view>
</div>
</template>

推荐可以模拟数据的网址

Easy Mock
rapapi

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

Javascript 相关文章推荐
javascript重写alert方法的实例代码
Mar 29 Javascript
javascript检测页面是否缩放的小例子
May 16 Javascript
extjs ColumnChart设置不同的颜色实现代码
May 17 Javascript
Node.js编写组件的三种实现方式
Feb 25 Javascript
jquery设置表单元素为不可用的简单代码
Jul 04 Javascript
原生js实现查询天气小应用
Dec 09 Javascript
详解Sea.js中Module.exports和exports的区别
Feb 12 Javascript
原生JS实现图片无缝滚动方法(附带封装的运动框架)
Oct 01 Javascript
vue使用 better-scroll的参数和方法详解
Jan 25 Javascript
mpvue全局引入sass文件的方法步骤
Mar 06 Javascript
微信小程序实现滚动加载更多的代码
Dec 06 Javascript
详解vue中在父组件点击按钮触发子组件的事件
Nov 13 Javascript
小程序自定义组件实现城市选择功能
Jul 18 #Javascript
微信小程序实践之动态控制组件的显示/隐藏功能
Jul 18 #Javascript
微信小程序项目实践之主页tab选项实现
Jul 18 #Javascript
详解性能更优越的小程序图片懒加载方式
Jul 18 #Javascript
微信小程序项目实践之验证码倒计时功能
Jul 18 #Javascript
微信小程序日期选择器实例代码
Jul 18 #Javascript
JavaScript实现的反序列化json字符串操作示例
Jul 18 #Javascript
You might like
php foreach 使用&amp;(与运算符)引用赋值要注意的问题
2010/02/16 PHP
微信利用PHP创建自定义菜单的方法
2016/08/01 PHP
php实现有序数组打印或排序的方法【附Python、C及Go语言实现代码】
2016/11/10 PHP
使用jQuery.Validate进行客户端验证(初级篇) 不使用微软验证控件的理由
2010/06/28 Javascript
jQuery中add实现同时选择两个id对象
2010/10/22 Javascript
关于JAVASCRIPT urldecode URL解码的问题
2012/01/08 Javascript
jQuery实现当按下回车键时绑定点击事件
2014/01/28 Javascript
为JS扩展Array.prototype.indexOf引发的问题及解决办法
2015/01/21 Javascript
基于JS实现EOS隐藏错误提示层代码
2016/04/25 Javascript
Jquery实现select multiple左右添加和删除功能的简单实例
2016/05/26 Javascript
nodejs入门教程四:URL相关模块用法分析
2017/04/24 NodeJs
Vue+axios实现统一接口管理的方法
2018/07/23 Javascript
jsonp跨域获取百度联想词的方法分析
2019/05/13 Javascript
JS回调函数原理与用法详解【附PHP回调函数】
2019/07/20 Javascript
微信小程序实现语音识别转文字功能及遇到的坑
2019/08/02 Javascript
vue-froala-wysiwyg 富文本编辑器功能
2019/09/19 Javascript
Vue-resource安装过程及使用方法解析
2020/07/21 Javascript
原生JavaScript实现随机点名表
2021/01/14 Javascript
[42:39]老党炸弹人试玩视频
2014/09/03 DOTA
Python的Flask框架中SQLAlchemy使用时的乱码问题解决
2015/11/07 Python
python 使用正则表达式按照多个空格分割字符的实例
2018/12/20 Python
Python捕获异常堆栈信息的几种方法(小结)
2020/05/18 Python
python中列表的含义及用法
2020/05/26 Python
Anaconda+spyder+pycharm的pytorch配置详解(GPU)
2020/10/18 Python
瑞典轮胎在线:Tirendo.se
2018/06/21 全球购物
英国奢侈皮具品牌:Aspinal of London
2018/09/02 全球购物
TCP/IP模型的分界线
2012/12/01 面试题
学生实习介绍信
2014/01/15 职场文书
写给学生的新学期寄语
2014/01/18 职场文书
乒乓球兴趣小组活动总结
2014/07/08 职场文书
2015年妇幼卫生工作总结
2015/05/23 职场文书
网聊搭讪开场白
2015/05/28 职场文书
房产电话营销开场白
2015/05/29 职场文书
党支部审查意见
2015/06/02 职场文书
2016年国陪研修感言
2015/11/18 职场文书
python必学知识之文件操作(建议收藏)
2021/05/30 Python