HTML页面用axios出现跨域,Vue 中使用 axios 传输数据,当数据量过大时会提示跨域?...

在使用Vue-cli4.3.1构建的前端与Apache/Nginx+Thinkphp5后端交互时,遇到Markdown内容提交导致的跨域问题。通过在后端添加允许跨域的Header解决了部分问题,但当Markdown内容过长时,依然出现跨域错误。这可能是由于请求头大小超过了Nginx的限制。解决方案包括调整Nginx配置中的client_body_buffer_size和client_header_buffer_size等参数。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

环境 —

前端:Vue-cli 4.3.1

后端:Apache || Nginx+Thinkphp5

今天打算用写一个Markdown编辑器给博客用,然后需要将Markdown原文和解析好的HTML提交后端,遇到跨域

Access to XMLHttpRequest at 后端接口 from origin ‘http://localhost:8080’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource

这个简单,我直接在TP里index.php里加了个header头

header("Access-Control-Allow-Origin:*");

header("Access-Control-Allow-Methods:GET, POST, OPTIONS, DELETE");

header("Access-Control-Allow-Headers:DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type, Accept-Language, Origin, Accept-Encoding");

然后顺利提交,但是一旦我输入的字符过多时,居然会提示跨域?

33fd03106536913d1d594187fa25c0cc.png

9f2a4a5be69d30020636d9220e737229.png

Header头

17c5cbdbda4467bc4ce5c9f0a455463f.png

我打印了下字符长度,4820,我发现我字符长度在2-3000的时候可以提交,一但长了就提示跨域。。。What is this?

console.log(this.content.length + this.html.length);

PHP那里我改了半天还是一样,应该是跟它没关系,我甚至随便换了一个URL还是这样,可能是提交的时候就阻止了。

其实我没指望能发帖解决,可能全论坛就我一个人遇到这种事情,不过想了想可能是Vue配置有问题,我Vue-cli版本是4.3.1,比起Vue-cli 2.* 一下载下来像vue.config.js这种配置文件都是没有的,我也许是Vue配置有问题所以我想请问下这种问题是我配置文件的问题吗

回答

这个感觉跟VUE配置关系不大,应该是HTTP头传输过大的字符时有问题?

估计是你存入串太长,存库失败,后端500了。查看下后端日志

盲猜一下,这应该是请求内容的长度超过 nginx 的默认最大长度限制了,nginx 直接给客户端返回了个4** 错误码,然后这个返回的数据就跨域了。代码并没有走到 header("Access-Control-Allow-Origin:*"); 这个地方来。

我试着搜索“Nginx post body 最大长度限制”,搜索结果里这个链接可以做参考

https://www.cnblogs.com/onmyw…

改 client_body_buffer_size 和 client_body_in_single_buffer

刚注意到你这是个 get 请求,这个链接里也写了,改client_header_buffer_size 和 large_client_header_buffers

又注意到你的web服务器有两个,

Apache || Nginx+Thinkphp5

先经过Apache,再到Nginx吗,Apache和Nginx的配置项都要检查一下。

话说为什么这么长的内容,要放在get的query string里传?

用post,放body里不行吗

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值