webpack生产模式打包跨域解决方法

前言

webpack是当前主流的前端打包框架之一，个人学习webpack也是一波三折，从最早的webpack3，到最新的webpack5个人都尝试了一番，经过长时间的试验，总算这三个版本都能打包了，可是在实际开发时，经常出现跨域问题。网上一搜，全是开发模式下的proxy代理，生产模式怎么解决没多少人提，所以这里个人说说自己的解决方法，也许不是最好的方法，但是也希望能够解决前端小伙伴的困扰，大神勿喷。

跨域问题思考

跨域其实就是前端同源策略导致的问题，一般来说前端对接接口时，经常会碰到这个问题，之前用jquery的时候，喜欢用jsonp来解决，但是经过一段时间的使用发现，jsonp都是get请求，一旦后台要求post传值直接GG。加上后面改用vue+axios框架，jsonp也就基本上不用了。
这里也闲话一下，因为跨域前端经历的多一点，后台许多人不了解，这也导致不少后台不愿意配合前端处理跨域，所以只能自立自强。

如何解决跨域

个人解决跨域的方式是使用代理，但是不同于直接在webpack中进行跨域处理，这里用的是nginx代理。使用nginx代理好处就是无论开发模式，还是生产模式，都可以用这个方法解决跨域问题，但是缺点也比较明显，那就是每个接口都要进行设置，使用的时候也比较繁琐，后续个人也会看看有什么优化方法，废话不多说正式开始。
1、第一步
首先下载一个nginx，版本随意，个人下的是nginx1.18.0Windows版的，文件夹中内容如下：

nginx下载
2、第二步
打开控制台，输入ipconfig，查看电脑ip地址，看ipv4地址就行了，后面有用。

3、第三步
修改conf文件下的nginx.conf文件。

4、第四步
修改代码如下图所示，server_name就是填写你的ip地址，也就是让你看的ipv4地址，listen可以随便填写个端口，我这里写的是8888。proxy_pass中就是最后映射到后台的地址。

5、第五步
所有的接口都配置完成之后，点击nginx.exe启动即可。

6、第六步
启动后，查看任务管理器，是否有这三个nginx.exe启动程序，如果有说明启动成功，可以尽情的跨域了。

7、额外说明
如果nginx.conf后续需要修改，记住需要通过任务控制台，手动关闭这三个进程，然后重新启动nginx即可。
当然这里也提一句，如果直接找后台要nginx，一定要注意，看有没有少这个temp文件夹，少了这个nginx会报错的，也会导致任务控制台里没有nginx.exe，尽可能保证nginx文件夹完整。嗨，说多了都是辛酸泪。

如果依然nginx启动不成功，那么可以通过点击logs文件夹下的error.log中查看报错原因，拉到最后一行就可以看到为什么启动不成功了，具体的问度娘，这里就不细说了。

总结

作为一个前端，不知道为什么很少看到有人说生产模式的跨域解决方法，当时这个问题也是困恼了好久，希望能帮到同为前端的朋友。当然这不算什么太好的方法，毕竟接口一多，配置起来的也多，所以后续也会尝试更多跨域解决方法，与君共勉。