Ajax and flask The server responded with a status of 405 (METHOD NOT ALLOWED)

Question

I'm trying to create a web app and finished the front end, I'm new to java scrip (first day with it), and I'm having issues with my login. I keep getting a The server responded with a status of 405 (METHOD NOT ALLOWED) error, I think it has to do with my calling a request to my API (written in java springboot) 192.168.1.31:6969/debug. also if this helps I'm able to make requests to the API in postman and I've done similar projects and have never had an issue like this so I think its just Ajax. I've tried everything I've seen online by enabling cors on everything, flask, the ajax script itself, and it won't work. Please help me.

This is my login.html

{% extends 'base.html' %}
{% include 'header.html'%}


{% block title %} Login {%endblock%}

{%block body%}

<div class="container">
    <div class="row">
        <div class="p-5 bg-light">
            <form action="" method="POST">
                <b><h1 class="float-center text-center">Login</h1></b>
                <div class="col-xs-8 col-lg-offset-2">
                    <div class="form-group">
                        <h3>Username:</h3>
                        <input type="text" class="form-control" id="username" required="1">
                    </div>
                </div>
                <div class="col-xs-8 col-lg-offset-2">
                    <div class="form-group">
                        <h3>Password:</h3>
                        <input type="password" class="form-control" id="password" required="1">
                    </div>
                </div>
                <br>
                <div class="form-group">
                    <button class="btn btn-lg btn-success pull-right" onclick="login()" type="submit">Login</button>
                </div>

                <script>
                    function login(){
                        var username = document.getElementById("username").value;
                        var password = document.getElementById("password").value;

                        var response = ""

                        var settings = {
                            'cache': false,
                            'dataType': "jsonp",
                            "async": true,
                            "crossDomain": true,
                            "url": "http://192.168.1.31:6969/debug",
                            "method": "POST",
                            "headers": {
                                "accept": "application/json",
                                "Access-Control-Allow-Origin":"*"
                            }
                        }
                        $.ajax(settings).done(function (response) {
                            jQuery.support.cors = true;
                            response = response.data
                            console.log(response);

                        });

                        if(response != "-1"){
                            setCookie('session_token', response, 1)
                            window.open('http://localhost:5000/credentials',"_self")
                        }else{
                            window.alert("Username or Password is incorrect!")
                        }
                    }

                    function setCookie(name,value,days) {
                        var expires = "";
                        if (days) {
                            var date = new Date();
                            date.setTime(date.getTime() + (days*24*60*60*1000));
                            expires = "; expires=" + date.toUTCString();
                        }
                        document.cookie = name + "=" + (value || "")  + expires + "; path=/";
                    }

                    function getCookie(name) {
                        var nameEQ = name + "=";
                        var ca = document.cookie.split(';');
                        for(var i=0;i < ca.length;i++) {
                            var c = ca[i];
                            while (c.charAt(0)==' ') c = c.substring(1,c.length);
                            if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
                        }
                        return null;
                    }
                </script>
        </form>
        </div>
    </div>

    <a href="credentials">for now use this to go to next page</a>
</div>



<div class="container">
    <footer class="py-3 my-4">
    <p class="text-center text-muted">&copy; 2021 McHugo</p> <p class="text-center text-muted">Developed by Daniel Caminero from &copy;<a href="https://anonyomail.com">Anonyomail</a></p>
    </footer>
</div>


{%endblock%}

app.py

from unicodedata import name
from flask import Flask, render_template
from flask_cors import CORS, cross_origin


app = Flask(__name__)
app.secret_key = "pass"
cors = CORS(app)
app.config['CORS_HEADERS'] = 'Content-Type'


@app.route('/')
@cross_origin()
def Index():
    return(render_template('login.html'))

@app.route('/shoran')
@cross_origin()
def Shoran():
    return(render_template('shoran.html'))

@app.route('/credentials')
@cross_origin()
def Credentials():
    return(render_template('credentials.html', data = Credentials))


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

Answer 1

Change "method": "POST" to "type": "POST" in your settings var