这篇文章主要介绍了Vuejs2.0利用proxyTable实现跨域请求的示例,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。
创新互联专注于保山网站建设服务及定制,我们拥有丰富的企业做网站经验。 热诚为您提供保山营销型网站建设,保山网站制作、保山网页设计、保山网站官网定制、小程序定制开发服务,打造保山网络公司原创品牌,更为您提供保山网站排名全网营销落地服务。
前言:
本地项目在请求远端服务器接口时,不可避免的会遇到跨域问题,即便是设置了Access-Control-Allow-Origin:* ,在遇到登录这些需要本地存入cookie的也会很头痛,这里将介绍一个在vue-cli中配置代理来解决的办法。
在~/config/dev-server.js中 使用了非常强大的http-proxy-middleware 包。
用法:
比如我们要请求的远端服务器为:http://192.168.400:3000
proxyTable: { '/api/': { target: 'http://192.168.400:3000', changeOrigin:true, //set the option changeOrigin to true for name-based virtual hosted sites pathRewrite: { '^/api': '/api' } }, },
通过设置changeOrigin:true 开启代理
pathRewrite 意为重写路径
示例:
比如要请求的接口为http://192.168.400:3000/api/main/getUserInfo.action
this.$http.post('/api/main/getUserInfo.action') .then(res=>{ console.log(res) })
后续:
在实际工作中,我们还需要做些其他的,比如在axios中配置baseUrl:
/** * Created by Administrator on 2017/4/11. */ import axios from 'axios'; // 添加响应拦截器 axios.interceptors.request.use(function (config) { // 配置发送请求的信息 return config; }, function (error) { return Promise.reject(error); }); axios.interceptors.response.use(function (response) { // 配置请求回来的信息 return response; }, function (error) { return Promise.reject(error); }); var http = axios.create({ timeout: 8000, /*设置请求超时时间*/ baseURL:'http://192.168.400:3000', }); // Alter defaults after instance has been created http.defaults.headers.common['Authorization'] = ''; export default http; /**导出http,在mainjs中引用 import http from './config/axiosConfig'; Vue.prototype.$http = http; **/
感谢你能够认真阅读完这篇文章,希望小编分享的“Vuejs2.0利用proxyTable实现跨域请求的示例”这篇文章对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,更多相关知识等着你来学习!