title: I get [OPTIONS] method instead of [POST] in flask
body: <p>I'm making API calls from angular to flask. In flask, I'm getting [OPTIONS] instead of [POST].
  If I make the same API call twice then the flask will recognize it as [POST] method.</p>
  <p>this is the flask code:</p>
  <pre><code>import numpy as np
  import pickle
  
  from flask import Flask, request, redirect
  from flask.json import jsonify
  from flask_sqlalchemy import SQLAlchemy
  from flask_cors import CORS
  
  app = Flask(__name__)
  cors = CORS(app, resources={r&quot;*&quot;: {&quot;origins&quot;: &quot;*&quot;}})
  
  app.secret_key = &quot;Secret Key&quot;
  model = pickle.load(open('model.pkl', 'rb'))
  
  #API Calls
  @app.route('/',methods=[&quot;GET&quot;])
  def index():
      if request.method == &quot;GET&quot;:
          return jsonify(data=&quot;Hello World&quot;)
  
  @app.route('/login',methods=['POST'])
  def login():
      if request.method == 'POST':
          data = request.get_json()
          return jsonify(data),200
  
  @app.route('/register',methods=[&quot;POST&quot;])
  def register():
      if request.method == 'POST':
          data = request.get_json()
          email = data[&quot;email&quot;]
          username = data[&quot;displayName&quot;]
          password = data[&quot;password&quot;]
          res = {
              &quot;result&quot; : &quot;success&quot;
          }
          return jsonify(res),200
  
  if __name__ == &quot;__main__&quot;:
      app.run(debug=True)
  
  </code></pre>
  <p>and this the the API service in Angular:</p>
  <pre><code>export class ApiService {
    constructor(private http: HttpClient) {}
  
    getHeaders(method: string) {
      const token = localStorage.getItem(&quot;token&quot;);
      const headers: any = {};
  
      if (method === &quot;post&quot;) {
        headers[&quot;Content-type&quot;] = &quot;application/json&quot;;
      }  
  
      return {
        headers: new HttpHeaders(headers),
      };
    }
  
    get(url: string) {
      const headers = this.getHeaders(&quot;get&quot;);
      return this.http.get(`${environment.apiUrl}${url}`, headers).toPromise();
    }
  
    post(url: string, payload: Object) {
      const headers = this.getHeaders(&quot;post&quot;);
      return this.http
        .post(`${environment.apiUrl}${url}`, payload, headers)
        .toPromise();
    }
  }
  </code></pre>
  <p>and this is the method I'm calling when I click on the register button:</p>
  <pre><code>constructor(private api: ApiService, private router: Router) {}
  
    ngOnInit(): void {}
  
    async register(email: string,password: string,passwordCheck: string, displayName: string) 
    {
      const newUser = {
        email,
        password,
        passwordCheck,
        displayName,
      };
      try {
        const result = await this.api.post(&quot;/register&quot;, newUser);
        console.log(result)
        this.router.navigate([&quot;/login&quot;]);
      } catch (err) {
        console.log(err);
      }
    }
  </code></pre>
  <p>Terminal output in flask:</p>
  <pre><code>127.0.0.1 - - [17/Jun/2021 09:48:14] &quot;OPTIONS /register HTTP/1.1&quot; 200 -
  127.0.0.1 - - [17/Jun/2021 09:48:19] &quot;POST /register HTTP/1.1&quot; 200 -
  </code></pre>
  <p>Network tab in Inspect:
  <a href="https://i.stack.imgur.com/hRZPo.png" rel="nofollow noreferrer">register</a></p>
  <p>Thanks.</p>