首页 > 其他 > 详细

解决vue代理和跨域问题

时间:2019-12-29 15:51:48      阅读:85      评论:0      收藏:0      [点我收藏+]

安装命令:npm install vue-resource --save 

安装完之后在根目录下的package.json检查一下插件的版本

技术分享图片

 

 

在rourer-index.js下引入文件

 

1.import Resource from ‘vue-resource‘

2.Vue.use(Resource)

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

 

二、安装axios插件

安装axios命令:npm install --save axios

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

var axios = require(‘axios‘)

 

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

 技术分享图片

 

在新建的公共Js文件中写入:

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>

解决vue代理和跨域问题

原文:https://www.cnblogs.com/hdn420/p/12115093.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!