目录
一、405 报错的定义
在前端开发中，405 状态码表示 “方法不被允许（Method Not Allowed）”。这意味着客户端（通常是浏览器）试图使用一种服务器不允许的 HTTP 方法来访问某个资源。例如，服务器可能只允许使用 GET 方法来获取某个 HTML 文件，但客户端却使用了 POST 方法进行访问，此时就会出现 405 错误。
二、405 报错的原因
(一）服务器端配置问题
1、路由配置错误
- 后端框架路由设置不当：如果后端使用了框架（如 Express、Django 等），可能是路由配置没有正确处理请求方法。例如，在 Express 中，路由是通过
app.get()、app.post()等方法来定义的。如果只定义了app.get()来处理某个路径，但客户端却发送了 POST 请求，就会导致 405 错误。 - 静态资源服务器配置问题：对于静态资源（如 HTML、CSS、JavaScript 文件），服务器（如 Apache、Nginx）可能有默认的访问规则。如果没有正确配置允许特定方法访问这些静态资源，就可能出现 405 错误。例如，服务器默认可能只允许 GET 方法访问 HTML 文件，当使用 POST 方法访问时就会报错。
2、服务器方法限制
- 安全策略限制：服务器可能基于安全策略限制某些方法用于特定资源。例如，为了防止恶意的数据修改，服务器可能禁止除 GET 以外的方法访问某些只读的资源，如信息展示页面。
- 业务逻辑限制：根据业务需求，某些资源可能只应该通过特定的方法来访问。例如，一个数据查询接口可能只允许 GET 方法，而数据更新接口只允许 POST 或 PUT 方法。如果客户端使用了不符合业务逻辑的方法，就会触发 405 错误。
(二）跨域问题（CORS）
1、CORS 配置不当
- 当进行跨域请求时，如果服务器没有正确配置跨域资源共享（CORS）策略，可能会导致 405 错误。例如，服务器可能允许来自某些特定源的 GET 请求，但对于 POST 请求没有正确配置允许的源，或者没有配置允许的请求方法。
- 即使前端代码在发送请求时设置了正确的跨域头信息（如
Access - Control - Request - Method），如果服务器没有正确响应这些头信息，仍然可能出现 405 错误。
(三）前端代码问题
1、请求方法设置错误
- 表单提交方法错误：如果前端使用了 HTML 表单（
<form>）来提交数据，可能错误地设置了表单的method属性。例如，应该是 GET 请求（用于查询数据）却设置成了 POST 请求。 - JavaScript 请求方法错误：当使用 JavaScript（如
fetch、XMLHttpRequest）发送请求时，可能在代码中错误地指定了请求方法。例如，在fetch请求中：
fetch('https://example.com/api/data', {
method: 'POST'
});如果服务器端只允许 GET 请求获取该数据，就会出现 405 错误。
三、405报错的处理方式
(一）检查服务器端配置
1、检查后端框架路由
- 步骤一：定位相关路由：如果使用后端框架，找到处理出现 405 错误的请求路径的路由代码。例如，在 Express 中，可以通过查看
app.get()、app.post()等方法定义的路由来确定。 - 步骤二：修正路由设置：确保路由正确地处理了各种请求方法。如果需要支持多种方法（如 GET 和 POST），可以使用
app.route()方法来定义同时处理多种请求的路由，例如：
app.route('/api/data')
.get((req, res) => {
// 处理GET请求
})
.post((req, res) => {
// 处理POST请求
});2、检查静态资源服务器配置
- 步骤一：查看服务器配置文件：对于 Apache，查看
.htaccess文件（如果有）或主配置文件（如httpd.conf）；对于 Nginx，查看nginx.conf文件。找到关于静态资源访问的部分。 - 步骤二：调整配置：根据需要，修改配置以允许适当的请求方法访问静态资源。例如，在 Nginx 中，可以通过
location块来配置：
location /static/ {
if ($request_method = POST) {
add_header 'Access - Control - Allow - Method' 'POST';
}
root /var/www/html;
}- 检查服务器安全和业务逻辑设置：确保安全策略和业务逻辑对请求方法的限制是合理的。如果需要调整，可以修改服务器的安全配置文件或者业务逻辑代码中的方法限制部分。
(二）解决跨域问题
1、配置 CORS
- 步骤一：后端服务器配置 CORS 中间件（以 Express 为例）：使用
cors中间件来配置 CORS 策略。首先安装cors模块，然后在 Express 应用中使用：
const express = require('express');
const cors = require('cors');
const app = express();
app.use(cors({
methods: ['GET', 'POST'], // 根据需要允许的请求方法
origin: '*' // 允许所有来源（在开发环境可能适用，生产环境可能需要更严格的配置）
}));- 步骤二：检查和调整跨域头信息：确保前端发送的跨域请求头信息与服务器配置的 CORS 策略相匹配。例如，前端在发送 POST 请求时，可能需要设置
Access - Control - Request - Method头信息为POST，并且服务器要正确响应这些头信息。
(三）检查和修正前端代码
1、检查表单提交方法
- 步骤一：找到相关表单元素：在 HTML 文件中找到出现 405 错误的请求对应的表单。
- 步骤二：修改表单方法属性：如果需要将请求方法改为 GET，可以将
<form>标签的method属性设置为GET，例如：
<form action="https://example.com/api/data" method="GET">
<!-- 表单内容 -->
</form>2、检查 JavaScript 请求方法
- 步骤一：定位 JavaScript 请求代码：在 JavaScript 文件中找到发送出现 405 错误的请求的代码部分，可能是
fetch或XMLHttpRequest相关的代码。 - 步骤二：修改请求方法：根据服务器端允许的方法，将请求方法修改为正确的类型。例如，如果服务器只允许 GET 请求获取数据，将
fetch请求修改为：
fetch('https://example.com/api/data', {
method: 'GET'
});