网页表单提交失败？浏览器缓存或跨域限制【功能调试】

通常情况下，表单提交呈现无响应现象抑或是出现报错状况，这一般是由缓存过期、扩展干扰、CORS缺失、-Type不匹配以及跨域限制所引发的；此时需要依次进行清除缓存操作、启用无痕模式、查看检查响应头、核对请求头、在本地进行调试验证。

若您在尝试递交网页表单之际，操作却毫无响应，或者返回空白、错误提示，存在也许是因为浏览器缓存了过期逻辑的情况，又或者当前页面与后端接口存有跨域限制。以下是解决这个问题的步骤：

一、清除浏览器缓存并强制刷新资源

浏览器有可能载入了陈旧些的HTML，或者CSS，又或者是文件，致使表单绑定事件出现丢失情况，或者提交逻辑产生异常状况。强制性地清除缓存这一举动能够保证加载最新的代码。

1、在内，通过按下Ctrl加上Shift再加上（若是Linux系统则如此操作）或者Cmd加上Shift再加上（要是Mac系统就这样弄）来开启清除浏览数据面板。

2、把时间的范围设置成为 “所有的时间”，勾选出 “缓存的图片以及文件”，还有 “及其他的网站数据”。

3、按住鼠标，点击那个被称作 “清除数据” 的选项，等待其完成之后，将所有的标签页都予以关闭，接着，再次把目标页面重新打开。

二、禁用浏览器扩展并启用无痕模式验证

广告拦截器，会对表单提交请求拦截，或是对fetch施加篡改行为，隐私保护类扩展也存在这种情况。无痕模式能够将扩展所带来的干扰给排除掉。

1、于Linux系统下，按下Ctrl与Shift以及N，或在Mac系统里，按下Cmd跟Shift还有N，以此启动无痕窗口。

2、在无痕窗口中访问同一页面，填写表单并提交，观察是否仍失败。

3、如果在无痕模式里达成成功，那么就逐个去禁用已经安装的扩展，着重加以检查，之类的东西，还有HTTPS等等。

三、检查跨域响应头是否缺失--Allow-

当表单朝着和原有所处源存在着无论是在协议面上，还是域名方面，又或者是端口层面上，只要有任何一项呈现出不一样情形的API去进行提交操作时，浏览器就自然而然地会发起那种预先检查性质的请求，设若服务端最终并没有返回符合规定要求的CORS头，那么该请求就得面临被阻断的状况。

1、在开发者工具那儿，于标签页里，去触发表单提交这个行为，而后定位到与之对应的XHR或者fetch请求。

Ai

使用Ai 轻松制作电子邮件

下载

2、针对该请求去进行查看，以此来确认是不是存在着特定的 --Allow- 字段，并且要保证其值能够与当前页面的来源相匹配。

3、要是缺少了这个头，那就得让后端在响应里去添加，比如说设置成 --Allow-: 或者 --Allow-: *（这只限于没有凭证的请求）。

四、验证请求方法与-Type是否匹配后端预期

对于部分后端框架，像是REST等这种，它会对POST请求的-Type进行严格校验，要是前端发送JSON数据的时候却没有设置，或者发送表单数据的时候却使用/json这种方式，那么就会致使解析失败。

1、于其中轻点去提交请求之举，转而切换至该选项卡，核查那个之中的-Type值。

2、如果表单当中包含文件上传的话，那就一定要保证使用那个对象，并且不要亲自去手动设置-Type，而是让浏览器自行去添加。

3、要是进行的是纯JSON提交，在于确认之中设置了这样的情况，即：{ '-Type': '/json' }，并且body变为JSON.(data)。

五、临时绕过CORS进行本地调试（仅开发环境）

当没办法马上对后端配置作出修改的时候，能够借助本地代理或者浏览器启动参数，临时把跨域限制解除掉，以此用来快速验证前端逻辑是不是正常。

1、把所有实例都关闭掉，于终端去执行，参数是： --user-data-dir=/tmp/ ---web-。

2、要留意，这种方式仅仅局限于本地进行调试之时，是不可以被用来针对测试凭据相关的请求的，像那种所带的请求亦是如此，并且绝对就得要把所有其他的窗口给关闭掉。

3、于新开启的不存在限制的窗口里，去对页面进行访问，接着提交表单，要是成功了，那么就明确地指向有关CORS配置方面的问题。

相关标签： # 功能调试 # 浏览器缓存 # 跨域限制 # 表单提交 # 网络请求