本地80端口服务器HTML访问8080端口服务器JS文件的问题咨询

嗨，我来帮你捋捋这个问题～

你遇到的控制台只输出一次日志的情况，大概率是浏览器缓存机制在搞鬼，或者是两个脚本内容完全一致导致浏览器觉得没必要重复执行。咱们一步步拆解：

1. 为什么只输出一次？ #

当浏览器加载第一个js/test.js（来自80端口）后，会把这个文件缓存到本地。之后加载http://localhost:8080/test.js时，发现文件名、文件内容都和缓存里的完全一致，就直接复用缓存的版本，不会重新发起请求，自然也不会重复执行代码，所以控制台只出现一次日志。

2. 快速验证你的猜想 #

你可以做个小测试确认是不是缓存的问题：

• 把8080端口服务器上的test.js内容改成不一样的，比如：

  console.log("inside test.js from 8080 port");
  

• 打开浏览器开发者工具（按F12），切换到Network面板，勾选「Disable cache」（禁用缓存），然后刷新页面
• 这时候你应该能看到控制台输出两条不同的日志，就说明之前确实是缓存导致的

3. 解决办法（按需选择） #

如果你的需求就是要加载这两个脚本，哪怕文件名相同，试试下面的方法：

• 加版本/随机参数（推荐）：给脚本URL加个独特的参数，让浏览器认为是不同资源，比如：

  <script type="text/javascript" src="js/test.js?v=local80"></script>
  <script type="text/javascript" src="http://localhost:8080/test.js?v=remote8080"></script>
  

• 修改文件名：直接把其中一个脚本改名，比如把8080端口的改成test_8080.js，然后对应修改引入路径
• 开发阶段临时禁用缓存：就像刚才测试那样，在开发者工具里勾选禁用缓存，适合调试时用

另外补充一句：如果是跨域权限问题，你会在Network面板看到8080的请求失败（比如403状态码），但根据你说控制台有输出，所以基本可以排除这个情况，重点还是缓存～

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