webpack开发配置API代理proxy,解决跨域问题
1. 一个完整的webpack配置代理代码
设置代理需要:
1、需要使用本地开发插件:webpack-dev-server。
2、webpack-dev-server 使用的是 http-proxy-middleware 来实现跨域代理的。
webpack配置信息:
module.exports = {//...devServer: {proxy: {'/api': {target: 'http://blog.csdn.net/',pathRewrite: {'^/api' : ''},changeOrigin: true, // target是域名的话,需要这个参数,secure: false, // 设置支持https协议的代理},'/api2': {.....}}}
};
2. 配置中主要的参数说明
2.1 ‘/api’
捕获API的标志,如果API中有这个字符串,那么就开始匹配代理,
比如API请求/api/user, 会被代理到请求 http://blog.csdn.net/api/user 。
2.2 target
代理的API地址,就是需要跨域的API地址。
地址可以是域名,如:http://blog.csdn.net
也可以是IP地址:http://127.0.0.1:8081
如果是域名需要额外添加一个参数changeOrigin: true,否则会代理失败。
2.3 pathRewrite
路径重写,也就是说会修改最终请求的API路径。
比如访问的API路径:/api/user,
设置pathRewrite: {’^/api’ : ‘’},后,
最终代理访问的路径:http://blog.csdn.net/user,
这个参数的目的是给代理命名后,在访问时把命名删除掉。
2.4 changeOrigin
这个参数可以让target参数是域名。
2.5 secure
secure: false,不检查安全问题。
设置后,可以接受运行在 HTTPS 上,可以使用无效证书的后端服务器
3. 参考资料
webpack-dev-server: https://github.com/webpack/webpack-dev-server.
http-proxy-middleware: https://github.com/chimurai/http-proxy-middleware
webpack开发配置API代理proxy,解决跨域问题相关推荐
- webpack开发配置API代理解决跨域问题-devServer
1. 一个完整的webpack配置代理代码 设置代理的前提条件: 1.需要使用本地开发插件:webpack-dev-server. 2.webpack-dev-server使用的是http-proxy ...
- React配置代理proxy解决跨域问题
一.在package.json中直接设置proxy 和Vue不同,React是在package.json文件中使用proxy配置 注意: create-react-app脚手架低于2.0版本时候,可以 ...
- 微服务架构(5):nginx反向代理cors解决跨域
微服务架构(5):nginx反向代理&&cors解决跨域 学习目标 1.使用域名访问本地项目 1.1.统一环境 1.2.域名解析 1.3.解决域名解析问题 1.4.nginx解决端口问 ...
- proxy解决跨域问题
本文基于对王红元老师的学习,很荣幸是他的一名学生 1.proxy介绍 proxy是我们开发中非常常用的一个配置选项,它的目的设置代理来解决跨域访问的问题: p比如我们的一个api请求是 http:// ...
- jQuery ajax 结合vue 获取豆瓣api 数据 ,jsonp解决跨域
jQuery ajax 结合vue 获取豆瓣api 数据 ,jsonp解决跨域 <!DOCTYPE html> <html><head><meta chars ...
- 知乎日报 API 分析(解决跨域精简版)
特别感谢 知乎日报 API 分析 声明 以下所有 API 均由知乎(Zhihu.Inc)提供,本人灵感均来自知乎日报 API 分析,对于原来的分析进行了一些个人的整改,如有不当之处请告知本人,本人立即 ...
- vue cli3.3 以上版本配置vue.config.js 及反向代理操作解决跨域操作
const webpack = require('webpack') module.exports = { configureWebpack: { plugins: [ new webpack.Pro ...
- proxy跨域不生效_配置proxy解决跨域问题
用一个最简单的方法解决API资源请求跨域问题:http-proxy-middleware http-proxy-middleware不需要自己安装,在安装webpack过程中,会自动依赖安装到你的no ...
- 本地开发代理、解决跨域、虚拟域名
概述 虚拟本地域名: 1.host 做map映射,注意端口号 2.charles.fiddler代理虚拟域名 常见本地开发解决代理方案三种: 1.chrome extensions 扩展程序(cors ...
最新文章
- Centos下源码安装golang
- STL源代码分析(ch2 内存分配)jjalloc.h
- zoj 2723 Semi-Prime
- 数据库简单的实际运用 ①
- Apache的认证、授权、访问控制
- PHP HTML 生成 PDF
- 关于ecshop模板更新版本的解决方法(三)
- 流拍后,Cerberus 银行木马源代码在黑市免费公开
- 使用pandas循环数据帧的最有效方法是什么? [重复]
- LeetCode 343. 整数拆分(动态规划)
- 「13」朴素贝叶斯Python实战:计算打喷嚏的工人患上新冠肺炎的概率
- linux查文件被哪些程序占用—fuser和lsof的使用
- 阶段5 3.微服务项目【学成在线】_day01 搭建环境 CMS服务端开发_18-页面查询接口定义-定义接口...
- 破解vysor为专业版
- C++ 虚函数语义学
- closest() 方法
- 2017年下半年中学综合素质问答题
- RevitAPI: 当前视图为透视图的时候IdlingEvent不会被触发
- 读书笔记_002 甘于平凡而不甘于平凡的腐烂——《平凡的世界》所感
- 我的世界java最低配置要求,我的世界需要什么配置