405 method not allowed error for POST request by flask app

I have a simple web app to message (using Twilio API) selected respondents with the following code:

app.py

client = Client(account_sid, auth_token)

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

@app.route('/send_sms',methods=['POST'])
def send_sms():
    message = request.form['message']
    selected_groups = request.form.getlist('groups')
    selected_secretariat_member = request.form.get('selected_secretariat_member')
    # more code ...
    return redirect(url_for('index'))

templates/index.html

<div class="container mt-5">
    <h1 class="text-center">Send Mass SMS</h1>
    <form method="post" action="{{ url_for('send_sms') }}">
      <div class="form-group">
        <label for="message">Message</label>
        <textarea class="form-control" id="message" name="message" rows="3" required></textarea>
      </div>
      <div class="form-group">
        <label>Select Groups</label>
        <!-- Groups -->
      </div>
      <button type="submit" class="btn btn-primary">Send SMS</button>
    </form>
</div>

I was using the live server provided by the VS Code live server extension I believe. When I clicked on submit for my form, I received a 405 Error. When I look at the network section in developer tools, the Response Headers has a row stating which methods are allowed and only GET, HEAD, OPTIONS are allowed. I tried other solutions people had proposed on SO such as:

1. Adding the following to web.config

<system.webServer>
  <modules>
    <remove name="WebDAVModule" />
  </modules>
  <handlers>
    <remove name="WebDAV" />
  </handlers>
</system.webServer>

2. Defining the methods before the index() function

@app.route('/', methods=['GET','POST'])
def index():
    return render_template('index.html')

3. Checking the handler mappings to see if POST is part of their allowed Verbs

4. Adding GET to the methods for send_sms()

app.route('/send_sms',methods=['GET','POST'])
def send_sms():

I am really confused on what to do. I used to have this error when learning HTML Forms and php but I brushed it off as I didn't have a dedicated web server. However this seems to be a problem with the methods in general. Appreciate the help.

I think I understand the problem. I think the procedures you're following are:

1. You have your index.html open in VS Code.
2. You clicked "Go Live" in order to start Live Server.
3. When using your form, it returns a 405 in browser, like this:

I see the exact same header information that you describe when I follow these procedures.

The problem isn't with your methods in your Flask app. It is that you're using Live Server (the VS Code extension) to serve your index.html instead of running your app.py code.

Try running your Flask app using flask run. My advice for procedures would be:

1. Create a virtual environment. Activate the environment and have Flask installed.
2. Open a shell at your project's root (where app.py lives) (I'm using a bash shell), and use flask run to run your app using the Flask development server.
3. Go to your browser and make your form request. You shouldn't have any problem.

#bash
python -m venv .venv
source .venv/bin/activate
pip install --upgrade pip
pip install flask
    
flask run

#or

python app.py

You will actually want to run your Flask app.py file to let Flask do the work of rendering your application. Remember that using the Flask development server is not intended for production, but if you want to scale your app, Gunicorn is a more robust WSGI server package that can serve your Flask app.py code. Like so:

#bash
pip install gunicorn
gunicorn -w 4 -b 0.0.0.0:8000 app:app