从mysqli获取数据，用JS创建iFrame出现404错误，求原因

咱先从最容易踩坑的地方捋起，你遇到的这个404问题，大概率是下面这些原因中的一个：

• iFrame的src路径写错了
  这是最常见的锅！比如你在JS里给iframe的src设成了fetch-data.php，但这个文件根本不在当前页面的同级目录里，或者文件名拼错了（比如写成fetchdata.php少了个横杠）。尤其是Linux服务器还区分文件名大小写，Fetch-Data.php和fetch-data.php可是完全不同的两个文件哦。

• 后端处理mysqli数据的脚本不存在
  你要展示从mysqli获取的数据，肯定得有个后端脚本（比如get-data.php）来连接数据库、查询数据并返回内容吧？如果这个脚本本身就没创建，或者存放的路径和你写的src不匹配，那iframe自然找不到页面，返回404。

• 服务器配置或权限挡路了
  有时候脚本明明存在，但服务器不让访问：

  • 比如服务器开了URL重写（比如用.htaccess隐藏.php后缀），但你在src里还写了.php后缀，服务器就会找不到；
  • 或者脚本文件的权限不对，web服务器的用户（比如www-data）没有读取权限，有些服务器会直接返回404而不是403权限错误。

• JS动态生成时的相对路径坑
  如果你是用JS动态创建iframe，比如写了iframe.src = './data.php'，这里的相对路径是相对于当前页面的URL，而不是你的JS文件所在的路径。比如当前页面在/blog/detail.html，JS文件在/js/main.js，那./data.php会指向/blog/data.php，如果你的脚本在根目录，就得写成/data.php才行。

快速排查步骤 #

1. 直接访问src地址：把iframe的src路径复制到浏览器地址栏里直接打开，如果也显示404，那就是路径或脚本本身的问题；如果能正常显示内容，再回头查JS生成时的路径逻辑。
2. 核对文件名和路径：仔仔细细检查后端脚本的文件名、存放位置，别小看拼写错误和大小写问题。
3. 看服务器错误日志：比如Apache的error.log、Nginx的error.log，里面会明确告诉你哪个文件找不到，或者是权限问题，这能帮你快速定位根源。

内容的提问来源于stack exchange，提问作者Bashar Hamdan