打开网页ajax操作异常该怎么解决

打开网页时ajax请求报错，打开十有八九不是网页服务器挂了，而是操作你根本没看清浏览器到底在抱怨什么。我见过太多人一看到Network面板里红彤彤的异常Failed就直接甩锅给后端，结果查了半天，该解发现是打开前端自己把URL拼错了——少了个斜杠，或者多了个空格。网页

先说最常见的操作坑：跨域。你本地开个3000端口，异常后端跑在8080，该解ajax发过去，打开浏览器直接给你拦了。网页控制台报错里明晃晃写着CORS，操作你慌什么？异常这不是服务器拒绝你，是该解浏览器觉得你俩不是一个世界的人，不让通信。解决办法也直白——后端加个响应头，Access-Control-Allow-Origin: *，开发环境图省事就这么干。但你要是上线还这么写，那就是给全网黑客开门。生产环境老老实实配白名单。

第二个坑，status code是200，但你的success回调死活不执行。这种情况八成是返回的数据格式不对。你后端吐出来的是纯文本，前端却按JSON.parse去解析，不报错才怪。我遇到过最离谱的一次，后端返回了正常的JSON，但前面多了个BOM头，解析直接炸。你打开控制台看Response内容，肉眼看着正常，但程序不认。这时候用console.log(typeof data)看看，或者直接打印原始字符串，问题一下就暴露了。

还有种情况，ajax请求压根没发出去。你检查一下是不是触发了浏览器内置的某些拦截逻辑。比如你页面里有个form表单，按钮type没设成button，默认submit，点击后页面刷新了，ajax请求被中断。这种低级错误我犯过不止一次。另一种是HTTPS页面请求HTTP接口，混合内容被浏览器直接block。你Network面板里那个请求显示的是 (blocked:mixed-content)，别犹豫，要么换HTTPS，要么让后端配合改协议。

超时问题也值得一提。默认ajax超时时间有时候是0，意思是不限时。但有些框架默认设置30秒。你接口慢，用户等得不耐烦，刷新页面，结果请求被中断，后端可能已经处理到一半了。前端报timeout，后端其实成功执行了。这种不一致最坑人。解决办法是，前端设一个合理的超时时间，同时后端接口要做幂等性设计，防止重复提交造成脏数据。

最后说个偏门的——缓存。你改了后端代码，重新部署，但浏览器还在用旧缓存。GET请求尤其容易中招。你F12打开Network，看到请求后面标注着from disk cache，那就是缓存命中。你以为你在调新接口，实际上在跟旧数据较劲。解决办法简单粗暴：请求URL后面拼个随机参数，或者后端设置Cache-Control: no-cache。别小看这个，我调试一整天没头绪，最后发现是浏览器缓存作祟。

ajax报错别急着怀疑人生。先看Network面板，确认请求有没有发出去，再看状态码，然后看Response内容。这三步走完，八成问题已经定位了。剩下的两成，基本就是后端逻辑或者网络环境问题，那也不是你前端能控制的。记住，控制台是你的朋友，别怕它报红，怕的是你连看都不看。

本文地址：http://www.79wt.cn/news/045d1599939.html