Vuejs2.0 利用proxyTable实现跨域请求
来源:互联网 发布:mac .m2文件夹 看不见 编辑:程序博客网 时间:2024/05/20 21:21
前言:
本地项目在请求远端服务器接口时,不可避免的会遇到跨域问题,即便是设置了Access-Control-Allow-Origin:* ,在遇到登录这些需要本地存入cookie的也会很头痛,这里笔者介绍一个在vue-cli中配置代理来解决的办法。
在~/config/dev-server.js中 使用了非常强大的http-proxy-middleware 包。更多高级用法,请查阅其文档。
用法:
比如我们要请求跨域的端口为:http://127.0.0.1:3000
proxyTable: { '/data_add/': { target: 'http://127.0.0.1:3000', changeOrigin:true, pathRewrite: { '^/data_add': '/data_add' } }, },
1.通过设置changeOrigin:true 开启代理
2.pathRewrite 意为重写路径
示例:
比如要请求的接口为http://127.0.0.1:3000/data_add
this.$http.post('/data_add') .then(res=>{ console.log(res) })
后续:
在实际工作中,我们还需要做些其他的,比如在axios中配置baseUrl:
/** * Created by Administrator on 2017/12/18. */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://127.0.0.1:3000', });// Alter defaults after instance has been createdhttp.defaults.headers.common['Authorization'] = '';export default http; /**导出http,在mainjs中引用import http from './config/axiosConfig';Vue.prototype.$http = http;**/
以上就是本文的全部内容,希望对大家的学习有所帮助
阅读全文
0 0
- Vuejs2.0 利用proxyTable实现跨域请求
- Vue 2.x 如何利用proxyTable实现跨域请求(反向代理)
- Vuejs2.0之异步跨域请求
- Vuejs2.0之异步跨域请求
- vue 本地环境跨域请求proxyTable
- vue proxyTable 接口跨域请求调试(代理)
- Vue用axios请求数据proxyTable解决跨域问题
- vue.js中proxyTable 转发请求实现
- vueJs2.0穿梭框实现
- webpack之proxyTable设置跨域
- Vue-cli proxyTable 跨域问题
- vuejs2.0实现一个简单的分页
- vuejs2.0实现一个简单的分页
- JQuery利用JSONP实现跨域请求
- java利用cors实现跨域请求
- Vue-cli proxyTable 解决开发环境的跨域问题
- Vue-cli proxyTable 解决开发环境的跨域问题
- Webpack之proxyTable 解决开发环境的跨域问题
- 数据分析师面试准备
- 015
- 变量
- Java反射
- tail -f 暂停方法
- Vuejs2.0 利用proxyTable实现跨域请求
- 常量
- 云数据库 Redis 版功能特性
- Linux下非root用户使用串口
- ES6 Promise小笔记
- 016
- Java基础之JNI的简单实现
- 多级菜单 简单实现
- php 水印