前端的小伙伴对跨域问题肯定都不陌生。
常见解决跨域问题的方法如：JSONP、CORS、反向代理。。。等。
这里介绍一下如何使用webpack配置代理服务器解决跨域问题。

首先要清楚跨域问题产生的原因：浏览器的安全机制，不同源即跨域。
所以，反向代理的思路如下：
1、先从浏览器请求本地代理服务器
2、然后本地代理服务器请求目标服务器，拿到数据
3、当本地代理服务器将拿到的数据后，最后返回给浏览器
4、这样就绕过了浏览器直接请求目标服务器而产生的跨域问题

举个栗子：目标服务器：localhost:3000
本地代理服务器：localhost:8888

由于端口号不同产生了跨域问题：
如下图：

在webpack.config.js文件中添加 devServer 配置：
如下图：

代码如下：

[JavaScript] 纯文本查看 复制代码

devServer: {
        proxy: {
            '/api': {
                target: 'http://localhost:3000',
                changeOrigin: true,
                pathRewrite: { '^/api': '' }
            }
        }
    }

这样配置好之后，请求到 /api/xxx 现在会被代理到请求 http://localhost:3000/xxx


如：
原来请求：http://localhost:3000/category/queryTopCategory   --->   出现跨域
现在请求：/api/category/queryTopCategory                               --->   无跨域问题

如下图：

代理详细配置参考webpack官方文档：https://doc.webpack-china.org/configuration/dev-server/#devserver-proxy

点击查看更多精彩前端资源

点击有惊喜

前端的小伙伴对跨域问题肯定都不陌生。
常见解决跨域问题的方法如：JSONP、CORS、反向代理。。。等。
这里介绍一下如何使用webpack配置代理服务器解决跨域问题。

首先要清楚跨域问题产生的原因：浏览器的安全机制，不同源即跨域。
所以，反向代理的思路如下：
1、先从浏览器请求本地代理服务器
2、然后本地代理服务器请求目标服务器，拿到数据
3、当本地代理服务器将拿到的数据后，最后返回给浏览器
4、这样就绕过了浏览器直接请求目标服务器而产生的跨域问题

举个栗子：目标服务器：localhost:3000
本地代理服务器：localhost:8888

由于端口号不同产生了跨域问题：
如下图：

在webpack.config.js文件中添加 devServer 配置：
如下图：

代码如下：

[JavaScript] 纯文本查看 复制代码

devServer: {
        proxy: {
            '/api': {
                target: 'http://localhost:3000',
                changeOrigin: true,
                pathRewrite: { '^/api': '' }
            }
        }
    }

这样配置好之后，请求到 /api/xxx 现在会被代理到请求 http://localhost:3000/xxx


如：
原来请求：http://localhost:3000/category/queryTopCategory   --->   出现跨域
现在请求：/api/category/queryTopCategory                               --->   无跨域问题

如下图：

代理详细配置参考webpack官方文档：https://doc.webpack-china.org/configuration/dev-server/#devserver-proxy

点击查看更多精彩前端资源

点击有惊喜