Flask与JavaScript服务器连接报405错误：请求方法不允许问题排查

核心问题 #

错误405 (Method Not Allowed)+ 请求地址指向127.0.0.1:5500/api/receive-message，根源是两个关键问题：

• 请求发错服务器：Flask默认运行在5000端口，而你的HTML文件通过5500端口的静态Web服务器（比如VS Code的Live Server）访问，导致请求打到了静态文件服务器而非Flask后端。
• 跨域限制：即使修正请求地址，前端（5500端口）和后端（5000端口）属于不同源，浏览器会拦截跨域请求。

解决方案 #

方案1：让Flask直接托管HTML文件（最简方案） #

1. 在Flask项目根目录新建templates文件夹，把index.html放入该文件夹。
2. 修改app.py，添加路由返回HTML页面：

from flask import Flask, request, render_template

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/api/receive-message', methods=['POST'])
def receive_message():
    data = request.data.decode('utf-8')
    if data == 'hi':
        return 'I got it'
    else:
        return 'Message not recognized'

if __name__ == '__main__':
    app.run(debug=True)

3. 启动Flask，访问http://127.0.0.1:5000，点击按钮即可正常通信——此时前端和后端同端口，无跨域问题。

方案2：保留独立服务器，解决跨域问题 #

如果必须用5500端口的Web服务器运行HTML，需给Flask添加跨域支持：

1. 安装Flask-CORS扩展：

pip install flask-cors

2. 修改app.py启用跨域：

from flask import Flask, request
from flask_cors import CORS

app = Flask(__name__)
CORS(app)  # 允许所有跨域请求，生产环境可配置更严格的规则

@app.route('/api/receive-message', methods=['POST'])
def receive_message():
    data = request.data.decode('utf-8')
    if data == 'hi':
        return 'I got it'
    else:
        return 'Message not recognized'

if __name__ == '__main__':
    app.run(debug=True)

3. 修改前端fetch的请求地址，指定Flask的端口：

const response = await fetch('http://127.0.0.1:5000/api/receive-message', {
    method: 'POST',
    body: 'hi'
});

额外优化：规范请求头 #

为让后端更稳定解析请求，可给fetch添加Content-Type头：

const response = await fetch('http://127.0.0.1:5000/api/receive-message', {
    method: 'POST',
    headers: {
        'Content-Type': 'text/plain'
    },
    body: 'hi'
});

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