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 相关文章推荐
JQuery 前台切换网站的样式实现
Jun 22 Javascript
{}与function(){}选用空对象{}来存放keyValue
May 23 Javascript
Javascript在IE和FireFox中的不同表现简析
Dec 03 Javascript
同时使用n个window onload加载实例介绍
Apr 25 Javascript
JS对象转换为Jquery对象实现代码
Dec 29 Javascript
在浏览器中实现图片粘贴的jQuery插件-- pasteimg使用指南
Dec 29 Javascript
Javascript中Promise的四种常用方法总结
Jul 14 Javascript
浅谈angular4生命周期钩子
Sep 05 Javascript
详解vue通过NGINX部署在子目录或者二级目录实践
Sep 03 Javascript
angularjs1.X 重构controller 的方法小结
Aug 15 Javascript
使用vue-element-admin框架从后端动态获取菜单功能的实现
Apr 29 Vue.js
微信小程序scroll-view不能左右滑动问题的解决方法
Jul 09 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垃圾代码优化操作代码
2010/08/05 PHP
php中导出数据到excel时数字变为科学计数的解决方法
2013/02/03 PHP
PHP实现简单实用的分页类代码
2016/04/08 PHP
PHP实现无限分类的实现方法
2016/11/14 PHP
php arsort 数组降序排序详细介绍
2016/11/17 PHP
PHP+原生态ajax实现的省市联动功能详解
2017/08/15 PHP
javascript学习笔记(十三) js闭包介绍(转)
2012/06/20 Javascript
js解析与序列化json数据(一)json.stringify()的基本用法
2013/02/01 Javascript
node.js中的console.trace方法使用说明
2014/12/09 Javascript
jQuery实现数字加减效果汇总
2014/12/16 Javascript
jquery实现的简单二级菜单效果代码
2015/09/22 Javascript
js阻止浏览器默认行为触发的通用方法(推荐)
2016/05/15 Javascript
教你如何在Node.js中使用jQuery
2016/08/28 Javascript
Asp.Net之JS生成分页条的方法
2016/11/23 Javascript
jQuery修改DOM结构_动力节点Java学院整理
2017/07/05 jQuery
vue使用axios跨域请求数据问题详解
2017/10/18 Javascript
基于jQuery实现的设置文本区域的光标位置
2018/06/15 jQuery
Vue render渲染时间戳转时间,时间转时间戳及渲染进度条效果
2018/07/27 Javascript
vue动态循环出的多个select出现过的变为disabled(实例代码)
2019/11/10 Javascript
[04:09]2014DOTA2国际邀请赛Ti西雅图 历届冠军相继出局 BBC综述今日比赛
2014/07/20 DOTA
简单实现python聊天程序
2018/04/01 Python
Python补齐字符串长度的实例
2018/11/15 Python
如何用python写一个简单的词法分析器
2018/12/18 Python
OpenCV图像颜色反转算法详解
2019/05/13 Python
pygame实现俄罗斯方块游戏(基础篇2)
2019/10/29 Python
Python使用GitPython操作Git版本库的方法
2020/02/29 Python
Html5 new XMLHttpRequest()监听附件上传进度
2021/01/14 HTML / CSS
英国女性时尚精品店:THE DRESSING ROOM
2018/05/23 全球购物
软件测试面试题
2015/10/21 面试题
应届毕业生的个人自我鉴定
2013/10/24 职场文书
办公室主任职责范文
2013/11/08 职场文书
股东协议书
2014/04/14 职场文书
村党支部换届选举方案
2014/05/02 职场文书
物业公司的岗位任命书
2014/06/06 职场文书
党员评议思想汇报
2014/10/08 职场文书
Django开发RESTful API实现增删改查(入门级)
2021/05/10 Python