vue项目中Webpack-dev-server的proxy用法
2024-08-30 02:15:46
问题：在VUE项目中，需要请求后台接口获取数据，这时往往会出现跨域问题
解决方法：在vue.config.js中devServer配置proxy
常用的场景
1. 请求/api/XXX现在都会代理到请求http://www.baidu.com/api/XXX，例如/api/login代理到请求http://www.baidu.com/api/login
module.exports = {
//...
devServer: {
proxy: {
'/api': {
target: 'http://www.baidu.com',
changeOrigin: true,
}
}
}
};
2. 多个路径需要代理到同一个target下，你可以使用由一个或多个「具有 context 属性的对象」构成的数组：
module.exports = {
//...
devServer: {
proxy: [{
context: ['/auth', '/api'],
target: 'http://www.baidu.com',
changeOrigin: true,
}]
}
};
3. 请求路径中不用传递/api，需要重写路径，例如/api/login代理到请求http://www.baidu.com/login
module.exports = {
//...
devServer: {
proxy: {
'/api': {
target: 'http://www.baidu.com',
pathRewrite: {'^/api' : ''},
changeOrigin: true,
}
}
}
};
4. 需要代理到https下，默认是不接受运行在https上，且使用了无效证书的后端服务器，这时需要设置secure:false
module.exports = {
//...
devServer: {
proxy: {
'/api': {
target: 'https://www.baidu.com',
secure: false,
changeOrigin: true,
}
}
}
};
解决跨域原理
- changeOrigin参数, 是一个布尔值, 设置为true, 本地就会虚拟一个服务器接收你的请求并代你发送该请求
最新文章
- Linux哲学思想--基本法则
- 学习C语言感悟
- logback logback.xml常用配置详解（三） <filter>
- STL库的内存配置器（allocator）
- JavaScript-在当前显示区范围内实现点不到的小方块
- Beats数据采集---Packetbeat\Filebeat\Topbeat\WinlogBeat使用指南
- Python面试题 —— 计算列表中出现最多次的字符
- java\c程序的内存分配
- Python学习笔记-Day3-python内置函数
- UltraEdit （Ctrl + F） 查找、（Ctrl + R）替换功能失效
- 恶意软件&quot;跨平台&quot; 小心钱包很受伤
- Jenkins: 执行 PowerShell 命令
- Uninstall registry
- 字符编码几个缩写 ACR CCS CEF CES TES
- Tomcat入门
- 【设计模式】Javascript设计模式——状态模式（行为型）
- GIS原理学习目录
- Extjs学习笔记--（五，事件）
- IOC和DI
- 【转载】DXUT11框架浅析(4)--调试相关