详解Vuejs2.0 如何利用proxyTable实现跨域请求
网络编程 2021-07-04 18:33www.168986.cn编程入门
本篇文章主要介绍了Vuejs2.0 如何利用proxyTable实现跨域请求,具有一定的参考价值,有兴趣的可以了解一下
前言
本地项目在请求远端服务器接口时,不可避免的会遇到跨域问题,即便是设置了Aess-Control-Allow-Origin ,在遇到登录这些需要本地存入cookie的也会很头痛,这里笔者介绍一个在vue-cli中配置代理来解决的办法。
在~/config/dev-server.js中 使用了非常强大的包。更多高级用法,请查阅其。
用法
比如我们要请求的远端服务器为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.mon['Authorization'] = ''; export default http; /导出http,在mainjs中引用 import http from './config/axiosConfig'; Vue.prototype.$http = http; /
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持狼蚁SEO。
编程语言
- 如何快速学会编程 如何快速学会ug编程
- 免费学编程的app 推荐12个免费学编程的好网站
- 电脑怎么编程:电脑怎么编程网咯游戏菜单图标
- 如何写代码新手教学 如何写代码新手教学手机
- 基础编程入门教程视频 基础编程入门教程视频华
- 编程演示:编程演示浦丰投针过程
- 乐高编程加盟 乐高积木编程加盟
- 跟我学plc编程 plc编程自学入门视频教程
- ug编程成航林总 ug编程实战视频
- 孩子学编程的好处和坏处
- 初学者学编程该从哪里开始 新手学编程从哪里入
- 慢走丝编程 慢走丝编程难学吗
- 国内十强少儿编程机构 中国少儿编程机构十强有
- 成人计算机速成培训班 成人计算机速成培训班办
- 孩子学编程网上课程哪家好 儿童学编程比较好的
- 代码编程教学入门软件 代码编程教程