前端开发者的“心头刺”，终于被拔掉了！
哎，说到文件上传，我可是有一肚子苦水要倒啊！尤其是那个跨域问题文件上传，简直就像是我职业生涯里的一块“狗皮膏药”，贴上了就撕不下来，每次碰到都让我抓耳挠腮、头发薅掉一大把。😭
你要是没经历过那种“明明上传成功了，浏览器却给你一个大红叉”的绝望，你根本体会不到我当时的内心崩溃，那种感觉，就像是你精心做了一桌子菜，结果客人一看说“这桌子不是我的”一样——东西是好东西,但它就是不认你啊！
跨域，你到底是何方神圣？
咱先捋捋这个“跨域”是咋回事，我们的网页就像一栋公寓楼，每个页面都有自己的“门牌号”，也就是协议、域名、端口，只要这三样有一个不一样，浏览器这个大管家就会出来拦人：“嘿，你俩不是同一层的，不能随便递东西！”
而文件上传呢，偏偏是个“爱串门”的主儿，很多企业项目里，前端在A域，文件服务器在B域，或者给云存储传文件的时候，那真是“一跨一个准”，跨域问题文件上传就成了我心头最大的痛。
我记得有次加班到深夜，就为了修一个跨域上传的bug，系统录不进去，测试妹妹一直在催，我盯着满屏的英文报错——Cross-Origin Request Blocked——那一刻，我真想把电脑屏幕吃了！这玩意儿根本不是“不理解怎么做”，而是“连入场券都不给你发”啊！
一次性讲明白：跨域问题文件上传的“破局之道”
别急别急，咱跟着我，一步步把这些荆棘斩断，我可是用无数次崩溃换来了这些干货,今天统统给你抖落出来！
第一招：用Nginx反代“装自己人”（最常用，也最香！）
这一招的精髓就是：偷偷摸摸，把跨域变成同域，你不在我对面，我就让大哥去把你拉过来,反正咱吃一顿饭的事！
具体操作呢，就是在前端服务器的Nginx配置里，加一层反向代理，比如你的API请求是 /api/upload，在Nginx里把它代理到后端的真实地址上，这样一来，浏览器看到的始终是“同一个域”，跨域问题文件上传不就直接凉凉了？哦不对，是直接被解决了！这招我愿称之为“终极无敌省心大法”，不仅解决了上传,顺带连其他接口的跨域问题也能一并给收拾了。
小技巧：配置的时候一定要加上
client_max_body_size这个参数，不然文件稍微大一点，Nginx直接给你来个413,到时候你哭都没地儿哭！
第二招：后端CORS“大开绿灯”（简单粗暴，但细节多）
如果你们后端是个大神，愿意配合你设置响应头，那CORS就是最直接的方式，在响应头里加上 Access-Control-Allow-Origin，就跟给浏览器管家递了一根烟：“兄弟，这俩是我亲戚，放行吧。”
不过哈，这里有个小坑，跨域问题文件上传不仅仅是GET和POST那么简单，因为上传文件涉及到了预检请求（OPTIONS），你要是忘了处理这个，或者冒烟没冒对，前端照样是白忙活一场，尤其是某些老项目，还用的是multipart/form-data，那这CORS的细节可太多了，必须得让后端老哥把 Access-Control-Allow-Headers 里加上 Content-Type,不然又得凉半截。
第三招：隐藏的绝活——form 隐藏iframe + 刷新（老腊肉技巧）
哎，这招现在用得少了，但碰到老项目还真是“救命稻草”，以前没有AJAX的远古时代，大家都是用表单直接提交的，为了避免页面刷新，就用一个隐藏的 <iframe> 当接收器，虽然现在大家都是用XHR或者axios，但有些老系统的安全策略贼严格，就认这个老套路，把 form 的 target 指向那个隐藏的 iframe，跨域问题文件上传虽然会自带个“手铐”，但这种方式有时候能无视跨域限制，体验太拉胯，我现在基本不推荐，除非万不得已,不然还是用前两招更舒服！
别慌！这些坑我都帮你踩过了
其实咱做开发的，最怕的不是问题本身，而是“问题之外的问题”。
- 上传进度条不显示了？那肯定是因为跨域导致
xhr.upload事件被拦截了，这时候记得要以CORS的机制去处理,别死磕。 - 文件名乱码？跨域时，
Content-Disposition里面的filename*编码格式容易翻车，记得统一用UTF-8或者encodeURI处理。 - 断点续传？咋说呢，跨域后有些网络策略会把预检请求拦截，导致分段上传直接断掉，这时候你用
axios的onUploadProgress可能会失灵,得自己封装底层。
你看，一说起跨域问题文件上传，我这嘴里的话就跟倒豆子似的，根本停不下来，不是吹牛，当年处理这问题的时候,我连做梦都在调接口。
最后一句掏心窝子的话
干前端这几年，最怕听到“跨域”两个字，但最熟悉的也是它，说白了，不管是跨域问题文件上传也好，还是接口鉴权也罢，这些都是咱成长路上的“垫脚石”，解决掉一次，你的功力就上涨一层，不然怎么会说“前端是最接近产品经理的‘疯子’”呢？😂
希望我这篇“血泪史”能帮到你，如果你也在摸爬滚打中遇到了什么奇葩的跨域上传问题，欢迎随时来找我唠唠，毕竟，一人计短，二人计长嘛！
最后送大家一句话：代码虐我千百遍，我待代码如初恋！咱们下篇文章见！🙌
PS： 想了解更多关于前后端交互、接口安全处理的实战经验，或者在学习网络安全相关技术的路上碰到了坎儿，都可以来加我QQ一起交流探讨，毕竟技术之路，一个人走得快,一群人走得远嘛！
学习网络安全可以加QQ：233333333（备注“跨域文章”即可）
