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的内存泄漏
Mar 04 Javascript
js event事件的传递与冒泡处理
Dec 06 Javascript
基于jQuery的Tab选项框效果代码(插件)
Mar 01 Javascript
JavaScript中json使用自己总结
Aug 13 Javascript
HTTP 304错误的详细讲解
Nov 13 Javascript
jQuery+ajax实现无刷新级联菜单示例
May 21 Javascript
javascript框架设计之浏览器的嗅探和特征侦测
Jun 23 Javascript
jquery操作select取值赋值与设置选中实例
Feb 28 Javascript
Vue.js学习记录之在元素与template中使用v-if指令实例
Jun 27 Javascript
JavaScript实现淘宝京东6位数字支付密码效果
Aug 18 Javascript
vue项目,代码提交至码云,iconfont的用法说明
Jul 30 Javascript
详解基于element的区间选择组件校验(交易金额)
Jan 07 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
德生S2000南麂列岛台湾FM收听记录
2021/03/02 无线电
PHP删除特定数组内容并且重建数组索引的方法.
2011/03/25 PHP
php自定义urlencode,urldecode函数实例
2015/03/24 PHP
PHP单例模式详细介绍
2015/07/01 PHP
PHP实现QQ、微信和支付宝三合一收款码实例代码
2018/02/19 PHP
jquery中获取id值方法小结
2013/09/22 Javascript
JS画线(实例代码)
2013/11/20 Javascript
javascript定义变量时有var和没有var的区别探讨
2014/07/21 Javascript
jquery中append()与appendto()用法分析
2014/11/14 Javascript
Jquery使用val方法读写value值
2015/05/18 Javascript
解决jQuery ajax请求在IE6中莫名中断的问题
2016/06/20 Javascript
AngularJS中的表单简单入门
2016/07/28 Javascript
Bootstrap源码解读导航(6)
2016/12/23 Javascript
利用JavaScript的%做隔行换色的实例
2017/11/25 Javascript
详解webpack之图片引入-增强的file-loader:url-loader
2018/10/08 Javascript
9102了,你还不会移动端真机调试吗
2019/03/25 Javascript
JS中封装axios来管控api的2种方式
2019/09/11 Javascript
k8s node节点重新加入master集群的实现
2021/02/22 Javascript
举例讲解Python的lambda语句声明匿名函数的用法
2016/07/01 Python
Python函数装饰器常见使用方法实例详解
2019/03/30 Python
Django 后台获取文件列表 InMemoryUploadedFile的例子
2019/08/07 Python
Django错误:TypeError at / 'bool' object is not callable解决
2019/08/16 Python
python之yield和Generator深入解析
2019/09/18 Python
使用celery和Django处理异步任务的流程分析
2020/02/19 Python
PyCharm中Matplotlib绘图不能显示UI效果的问题解决
2020/03/12 Python
python设置中文界面实例方法
2020/10/27 Python
CSS3提交意见输入框样式代码
2014/10/30 HTML / CSS
CSS3弹性盒模型flex box快速入门心得(必看篇)
2016/05/24 HTML / CSS
Omio中国:全欧洲低价大巴、火车和航班搜索和比价
2018/08/09 全球购物
澳洲CFL商城:CHEMIST FOR LESS(中文)
2021/02/28 全球购物
农行实习自我鉴定
2013/09/22 职场文书
详解Django的MVT设计模式
2021/04/29 Python
七个非常实用的Python工具包总结
2021/06/15 Python
Python之Matplotlib绘制热力图和面积图
2022/04/13 Python
python神经网络学习 使用Keras进行简单分类
2022/05/04 Python
mysql 获取相邻数据项
2022/05/11 MySQL