前端vue配置反向代理 proxy devServer axios
*分析功能 我们在开发的过程中会遇到 请求接口报错
Access to XMLHttpRequest at *** from origin 需要跨域的报错信息
· 亿点小知识跨域的几种方法
- 1.后端 通过CORS解决跨域问题
- 2.后端 通过 nginx反向代理
- 3.前端可以通过 node中间件实现跨域代理，原理大致与nginx相同，都是通过启一个代理服 务器，实现数据的转发
- 4.前端 vue框架的 反向代理
- 5.以上只举例了常见的几种跨域 其实跨域还有很多种方法如：document.domain + iframe 跨域、postMessage，jsonp跨域、websocket、等等
这里只说明 前端vue框架的反向代理
1.先检查自己的axios 配置
import axios from 'axios'; const instance = axios.create({ baseURL：" http://10.0.0.7:8888/api", // 这里的api就对应了 proxy 配置的api timeout: 3000, // 请求响应的时间 withCredentials: true,// axios 默认不会携带cookie });
- 2.配置反向代理
打开项目下vue.config.js ，配置devServer属性
devServer: { host: "0.0.0.0",// 允许外部ip访问 port: 8080, // 自定义修改8080端口 https: false,// 启用https open: false,//build自动打开浏览器 proxy:{ '/api':{// /api 是监听你请求的接口数据是否存在 /api 会把他替换成 target 的代理地址 target: 'http://192.168.1.0:8000',//代理地址，这里设置的地址会代替axios中设置的baseURL changeOrigin: true,// 如果接口跨域，需要进行这个参数配置 //ws: true, // proxy websockets //pathRewrite方法重写url pathRewrite: { '^/api': '/' //pathRewrite: {'^/api': '/'} 重写之后url为 http://192.168.1.0:80001/xxxx //pathRewrite: {'^/api': '/api'} 重写之后url为 http://192.168.1.0:80001/api/xxxx } }} },
- 3.创建一个
api.js专门存放接口
import instance from './request'; //导入配置好的axios // 请求登录接口 export const login = (data) => instance({ url: '/login', //这些是具体的路径 不会被代理掉 method: 'POST', data, });
以上就是 前端 通过vue进行的 反向代理
如碰到 nuxt.js + vue ，或者其他框架的问题 可以私下我 一起探讨学习
可以关注收藏博客 作者会持续更新…
