Vue 中使用 axios 传输数据,当数据量过大时会提示跨域?(√已解决)
环境 –
前端: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");
然后顺利提交,但是一旦我输入的字符过多时,居然会提示跨域?
Header头
我打印了下字符长度,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配置有问题所以我想请问下这种问题是我配置文件的问题吗
√已解决
感谢各位的回答,这源自于我对HTTP协议不够熟悉,我查看了下Apache的日志,发现报了个414错误
- HTTP 414 错误 – 请求 URI 过长 (Request URI too long)
- 解决办法1:
修改 Apache的httd.conf,在listen 80 下面添加
```apache
LimitRequestLine 40900
LimitRequestFieldSize 40900
```
[Nginx则是(点我前往)](https://www.cnblogs.com/onmyway20xx/p/4469202.html)
```Nginx
client_header_buffer_size 8k
large_client_header_buffers 8k
```
- 解决办法2:
但事实上我不希望去修改服务器配置,于是查了下,网上说可以使用post请求,我实际上试过了没用,然后查了下axios的使用方法,发现不同于jQuery axios需要配置Content-Type
import Qs from 'qs' // 用Qs.stringify()将对象序列化成URL的形式,Qs是axios里面自带的,所以直接引入就可以了
params = Qs.stringify(params);
this.axios.post(this.global_.api+'index.php/index/index/addMsgList',params,{headers:{'Content-Type':'application/x-www-form-urlencoded'}}).then(response => {console.log(response.data.data);});
设置了Content-Type后用post请求就没问题了。。。
感谢各位的回答!
Vue 中使用 axios 传输数据,当数据量过大时会提示跨域?(√已解决)相关推荐
- js中websocket基本使用及数据量过大或推送频率过快等基本问题
WebSocket的定义 WebSocket是html5提供的一种在单个TCP连接上进行双向通信的协议,解决了客户端和服务端之间的实时通信问题.浏览器和服务器只需完成一次握手,两者之间就可以创建一个持 ...
- 接口数据量太大,导致内存溢出,解决办法
通常我们使用接口调用数据总是返回一段我们需要的信息,或者是json 格式信息,通过接收将数据保存到程序当中,再对接收到的数据进行转换成对应的模型格式 .目前遇到的问题是接收的数据量过于巨大,导致完整接 ...
- Oracle临时库数据数据量过大,Oracle临时表空间过大问题解决
查询数据库服务器时,发现数据库服务器磁盘使用空间达到了98%,分析总共的数据文件也不可能达到如此大,经过查询发现原来临时表空间的使用情况达到了 32G,导致磁盘空间使用紧张.搜索了相应的文档与资料后, ...
- java switch中标签重复_java程序 怎样把id相同的记录挑出来,分别存到不同的文件中,除了switch case,数据量很大,id种类很多。...
展开全部 下边是我的实现. hawon1 的实现也是正确的,e69da5e6ba903231313335323631343130323136353331333332613761 我与它的不同是没有频 ...
- vue Echarts 填坑记(Echarts数据量大,导致浏览器卡顿)
最近使用vue + Echarts 实现vue项目的数据可视化功能的时候,发现随着组件的增多,组件里Echarts绘图的增多,页面操作越来越卡顿,点击数据比较大的组件时,Echarts绘图渲染页面的速 ...
- vue 文件转换二进制_在vue中使用axios实现post方式获取二进制流下载文件(实例代码)...
需求 点击导出下载表格对应的excel文件 在 vue 项目中,使用的 axios ,后台 java 提供的 post 接口 api 实现 第一步,在 axios 请求中加入参数,表示接收的数据为二进 ...
- 解决在Vue中使用axios用form表单出现的问题
vue中使用Axios第三方库,采用形式提交,参数格式为multipart /格式数据 ,请求参数变为对象格式的解决办法.(推荐第二种方法) 提交数据的四种编码方式 一,应用/ X WWW的窗体-ur ...
- vue中使用axios跨域请求
vue中使用axios请求API或其他域名地址时,会产生跨域请求问题,应该如何解决呢?(本文以请求API为例) 解决方法: 1.为axios设置请求头.拦截器等,这里直接对axios进行封装,将其封装 ...
- vue+cesium cesium数据量太大导致浏览器卡顿解决办法
vue+cesium cesium数据量太大 导致浏览器卡顿 解决办法 解决方案 : 不要把任何的cesium对象 放在data中监听,因为在data中的变量 , vue会劫持数据 , 导致迟缓. 解 ...
最新文章
- 跨境电商未来应该怎么走?
- 用户登录成功后才进入主窗口进行其他操作
- linux重定向文件被修改后,Linux服务器修改.htaccess文件实现301重定向
- Servlet要点、请求与响应
- java 裁剪 pdf_java – 使用iTextPDF修剪页面的空白
- HCIE-RS面试--P/A协商(超详细!)
- 【转】Python 2.x和Python3.x的区别
- php遍历桌面上的记事本,电脑桌面显示记事本便签内容要怎么设置一直锁定在桌面?...
- 华为机试:九宫格按键输入法
- FCC认证和3C认证区别
- 什么是ArcGIS Engine?
- 求树的最大宽度(层次遍历法)
- 共享姨妈巾出来了成为共享家族中的热门产品
- Python+QT+Selenium制作在线视频播放器
- AboutServer
- 拉格朗日松弛求解问题
- 蓝牙的基本概念以及发展轨迹 - 蓝牙的前生后世
- 基于java的微信支付之JSAPI公众号充值
- python向es写入大量数据_使用Python-elasticsearch-bulk批量快速向elasticsearch插入数据_李谦的博客-CSDN博客...
- 关于广州小狐科技有限公司
热门文章
- 将 Word 转换为 Markdown格式 【详细教程】
- 苹果开发者账号申请流程说明
- Java项目:(小程序)前台+后台相结合水果商城系统(spring+spring mvc+mybatis+layui+微信小程)
- 【NLP】NLP标注工具Brat的简单使用
- linux右键没有创建新文件夹,将新建文档添加回Ubuntu 18.04中的右键菜单
- 快捷生成HTML代码的实现
- ESP8266刷固件
- React实现(Web端)网易云音乐项目(二),错过了真的可惜呀
- linux 137错误,linux引导报错问题
- 产品随想6:痛点分析,是先“痛”还是先“点”?