JS独立文件引入时报HTTP 405错误，内嵌HTML时运行正常

405报错的核心原因是外部JS执行时机过早，点击事件未成功绑定，表单触发了默认POST提交。
你将外部JS的引入标签放在<head>中，浏览器解析到该标签时会暂停DOM渲染，优先下载执行JS代码。此时页面内的提交按钮、文本域等DOM元素还未加载完成，document.getElementById('formSub')实际返回值为null，后续的点击事件监听根本没有绑定到按钮上。点击“Censor Text”按钮时，表单会直接执行原生的POST提交动作，而你的后端服务没有配置当前路径的POST请求处理逻辑，最终返回405状态码。
内嵌JS能正常运行，是因为测试时大概率将内嵌的script标签放在了body中DOM元素的后方，JS执行时DOM已经渲染完成，事件绑定正常，event.preventDefault()可以成功拦截表单默认提交，不会向后端发送请求，自然不会出现405错误。

以下三种方案任选其一即可：

• 方案1：给外部JS的script标签添加defer属性，让JS延迟到整个DOM解析完成后再执行，修改后代码如下：

<script src="/js/main.js" defer></script>

• 方案2：将外部JS的引入标签从<head>中移动到</body>闭合标签的前面，确保JS执行时所有DOM元素已经渲染完成。
• 方案3：调整JS代码逻辑，将DOM获取、事件绑定的逻辑包裹在DOMContentLoaded事件回调中，无需修改script标签位置，修改后JS代码如下：

document.addEventListener('DOMContentLoaded', function() {
    var submitBtn = document.getElementById('formSub');
    submitBtn.addEventListener('click', censorWords)
})

function censorWords(event) {
   event.preventDefault();
   var textContent = document.getElementById('input');
   var redacted = ["boston", "red", "sox"];
   console.log(textContent.value)
   textContent.value = censored(textContent.value, redacted);
}

function censored(string, filters) {
   console.log('in')
   // "i" 忽略大小写，"g" 全局匹配，"|" 表示或逻辑
   var regexp = new RegExp(filters.join("|"), "gi");
   return string.replace(regexp, function (match) {
       // 匹配到的敏感词替换为等长的x
       var censorship = '';
       for (var i = 0; i < match.length; i++) {
           censorship += 'x';
       }
       return censorship
   })
}

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