Vue 项目 Axios 上传文件的问题，请帮忙一下，先谢谢了！

[WishMeLz]

上传文件不超过 30M 就没有问题，可以正常上传。

上传文件超过 30M 就爆出下面的跨域问题。

在接口文档上，在线调试上传超过 30M 的文件也没问题。

这个是项目依赖

项目是外包的，我到公司就接手这个项目了，项目有点乱，一直都是在改 BUG 。最近出现这个问题了，实在不知道该怎么解决。后台是 Node 改为 Java 的，Java 的代码我也不知道，他们就是说没问题，在线调试都可以上传。这个抛出跨域异常问题是直接抛出的。

[yaphets666]

设置好 content-type 了吗

[Quarter]

为啥文件大小和跨域有关啊😅

[menghuan]

服务器把上传文件限制大小改一下就行

[WishMeLz]

@menghuan 限制改了，改为无限制了，接口文档中在线上传都可以

[WishMeLz]

@Quarter 不知道啊，这个错误不就是跨域吗

[WishMeLz]

@yaphets666 设置了，小于 30m 都可以上传

[nigelvon]

不要被跨域报错迷惑了，本质还是因为处理请求中途出错，还未到设置 CORS 相关 headers，导致浏览器报跨域错误。
抓包或用别的工具模拟一下看下具体服务器返回的信息，可能更容易找到哪个环节抛出的异常。

[Lax]

看看 http 请求收到的内容是什么，很大可能是服务器端返回了错误的状态，缺少 CORS 相关 headers 只是副作用

[imgbed]

本来想点开看大图，没想到点开后图更小，围了一圈广告。。
楼主能否换个图床，例如 www.imgbed.cn

[imgbed]

限制一般有两个，一个是 php （或者 go 、java 、nodejs 等），一个是 nginx，两个都得改。还有就是 POST 最大限制和上传最大限制都要改

[wunonglin]

我来给你解释个完整的吧。不知道你后台过不过 nginx，我就按过 nginx 的方式和你说

1 、nginx 的 body 限制太小，设置大点的。
2 、然后在 nginx 设置 CORS 返回头。
3 、加返回头的时候要在后面加 always，例子：add_header Access-Control-Allow-Origin $http_origin always;

因为不知道是你 nginx 还是后端设置了 body 限制，导致返回的 http 状态码不是 200，但是呢，nginx 的 add_header 在不是 200 的时候不会 add （ ps：我只记得 200...其他会不会没查）所以需要加 always 关键字保证始终设置返回头。

但是问题还是你的 body 太大了。

[WishMeLz]

@wunonglin 在线文档里面调试是可以上传大文件的，为什么

[WishMeLz]

@imgbed 在线文档里面调试是可以上传大文件的，为什么

[imdong]

浏览器装插件，修改响应，加上跨域允许。然后看真正的错误是啥。

跨域错误只是表象，实际还是后端出错(超出大小限制没跑)导致没有正确响应(允许跨域的头)

比如后端程序，项目配置，nginx 之类的。

[wunonglin]

@WishMeLz #12 这个你自己对比 http 请求就知道了，要么就 apped 出来呗

[msg7086]

@imgbed 在网页中可以点开图片看大图。
你 imgbed 跑量跑到一定程度以后我觉得也会放广告的，没有必要用这种理由来贬低其他服务吧。
（家里有矿的当我没说。）

[imgbed]

@WishMeLz

应该是提供调试的服务器没限制那么小

[uselessVisitor]

后台配置？ spring: servlet: multipart: max-file-size