vue代理和跨域问题的解决

前端之家收集整理的这篇文章主要介绍了vue代理和跨域问题的解决前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

一、安装vue-resource插件

@H_404_5@

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

在rourer-index.js下引入文件

@H_404_5@

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

二、安装axios插件

@H_404_5@

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

@H_404_5@

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

插件 export function getHttp (url,callFun) { //get请求方法 axios.get(url).then(callFun) .catch(function(err){ console.log(err) }) } @H_404_5@

三、proxy代理

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

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

方法重写url,这样配置出来的url为http://localhost:8081/api/seller // '^/api': '/' // pathRewrite方法重写url,这样配置出来的url为http://localhost:8081/seller } } } @H_404_5@

四、数据调用

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

js部分

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) }) } } } @H_404_5@

html部分

商家@H_404_5@ @H_404_5@ @H_404_5@

推荐可以模拟数据的网址

Easy Mock rapapi

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

猜你在找的Vue相关文章