webpack开发配置API代理解决跨域问题-devServer

2024-05-29 07:56:11

1. 一个完整的webpack配置代理代码

设置代理的前提条件：
1、需要使用本地开发插件：webpack-dev-server。
2、webpack-dev-server使用的是http-proxy-middleware来实现跨域代理的。
3、webpack版本： 3.0、4.0亲测有效

一个webpack配置信息

module.exports = {//...devServer: {proxy: {'/api': {target: 'http://www.baidu.com/',pathRewrite: {'^/api' : ''},changeOrigin: true,     // target是域名的话，需要这个参数，secure: false,          // 设置支持https协议的代理},'/api2': {.....}}}
};

2. 配置中主要的参数说明

2.1 '/api’
捕获API的标志，如果API中有这个字符串，那么就开始匹配代理，
比如API请求/api/users, 会被代理到请求 http://www.baidu.com/api/users 。

2.2 target
代理的API地址，就是需要跨域的API地址。
地址可以是域名,如：http://www.baidu.com
也可以是IP地址：http://127.0.0.1:3000
如果是域名需要额外添加一个参数changeOrigin: true，否则会代理失败。

2.3 pathRewrite
路径重写，也就是说会修改最终请求的API路径。
比如访问的API路径：/api/users,
设置pathRewrite: {’^/api’ : ‘’},后，
最终代理访问的路径：http://www.baidu.com/users，
这个参数的目的是给代理命名后，在访问时把命名删除掉。

2.4 changeOrigin
这个参数可以让target参数是域名。

2.5 secure
secure: false,不检查安全问题。
设置后，可以接受运行在 HTTPS 上，可以使用无效证书的后端服务器

2.6 其他参数配置查看http-proxy-middleware文档
其他的配置参数等信息，可以查看这里：https://github.com/chimurai/h…

3. 参考资料

https://webpack.docschina.org/configuration/dev-server/#devserver-proxy

webpack开发配置API代理解决跨域问题-devServer相关推荐

reactjs脚手架配置http-proxy-middleware代理解决跨域问题
reactjs脚手架配置http-proxy-middleware代理解决跨域问题
vue-webpack项目本地开发环境设置代理解决跨域问题
vue-webpack项目本地开发环境设置代理解决跨域问题参考文章: (1)vue-webpack项目本地开发环境设置代理解决跨域问题 (2)https://www.cnblogs.com/xyyt ...
webpack开发配置API代理proxy，解决跨域问题
1. 一个完整的webpack配置代理代码设置代理需要: 1.需要使用本地开发插件:webpack-dev-server. 2.webpack-dev-server 使用的是 http-proxy- ...
vue2项目复习01-关闭elint检校，src文件别名，路由传参的对象写法，代理解决跨域问题，nprogress，vuex状态管理库，store的模块式开发，节流与防抖，编程式导航+事件委托路由跳转
1.关闭elint语法校验创建vue.config.js //关闭elint语法校验 {lintOnSave:false; } 2.src文件夹配置别名 jsconfig.json配置别名 @代表s ...
通过nginx反向代理解决跨域
先写一个发送跨域请求的页面index.html <html> <head><title></title> </head> <body& ...
vue反向代理解决跨域及部署nginx端口转发解决跨域
1. 前言本文是为了解决vue反向代理解决跨域及部署服务器nginx端口转发解决跨域,因为踩了不少的坑,百度了很多,也试了太多的方法,最终得以解决,所以记录一下,希望遇到同样问题的友友们可以高效的解 ...
使用反向代理解决跨域问题
在项目根目录下新建一个webpack的配置文件:vue.config.js. 跨域问题的解决必须在vue.config.js文件中进行配置书写. 代码内容如下 module.exports={devS ...
nginx正向代理解决跨域问题
原理为了更好的理解nginx解决跨域的原理,首先来了解一下跨域是怎么样产生的. 因为浏览器的同源政策,就会产生跨域.比如说发送的异步请求是不同的两个源,就比如是不同的的两个端口或者不同的两个协议或者 ...
Nginx 方向代理解决跨域问题-2
概述在浏览器端进行 Ajax 请求时会出现跨域问题,那么什么是跨域,如何解决跨域呢?先看浏览器端出现跨域问题的现象,如下图所示什么是跨域问题? 跨域,指的是浏览器不能执行其他网站的脚本.它是由浏览 ...

最新文章

热门文章