Handling an Angular HTTP Request with a Bottle Server CORS not allowed

Question

I'm trying to submit data from my Angular 9 App to a bottle backend server. On the clientside I'm getting the CORS Errror, that a 'Access-Control-Allow-Origin' header is missing. Also it says that the same-origin rule is blocking the request. On the backend it just prints the status code 405. When I perform the request via Postman however, everything is working fine. What changes do I have to do in order to make it work? I want it also to be working in production mode. Here's my code: Angular component.ts:

onSubmit(form) {
    console.log(form.value);
    this.http.post('http://localhost:8080/contact', form.value).subscribe();
}

My bottle backend server:

@post('/contact')
def progress_contact():
    response.set_header('Content-Type', 'application/json')
    response.set_header('Access-Control-Allow-Origin', 'http://localhost:4200')
    response.set_header('Access-Control-Allow-Methods', 'PUT, GET, POST, OPTIONS, DELETE')
    response.set_header('Access-Control-Allow-Headers', 'Access-Control-Allow-Origin, Content-Type, Accept, Accept-Language, Origin, User-Agent')
    print(request)
    print(request.POST.moin)
    print(request.POST.email)
    return 'hello'

As I mentioned, when performing a POST-Request via Postman, I get 'hello' in the response object and also the server prints the values I sent.

In case of `OPTIONS`, return 200 OK status, interrupting any other request handler in the chain. — julianobrasil, Jun 07 '20 at 20:12
You're handling the request, and that's ok, but you should have a request filter, through which all the requests should pass, and, this filter would be the right place to handle CORS. In that filter, you should put all the CORS code you put in your `@post` annotated function and add an `if` returning immediately an OK status in case the request method is `OPTIONS`. Unfortunately, I'm no Python programmer and cannot tell you how to do that. — julianobrasil, Jun 07 '20 at 21:08

score 1 · Accepted Answer · answered Jun 07 '20 at 20:11

1

You need to allow cors in your backend code. You are having problem because of preflight request in angular and your backend code not allow cors. There are multiple option you can allow cors and here the package on pypi you can also use. https://pypi.org/project/bottle-cors/

answered Jun 07 '20 at 20:11

Ajay saini

2,352
1
11
25

I have cors enabled (see the headers the server sends). What did actually help me solve this issue was the hint on the preflight request (didn't know they exist). So I had to enable OPTIONS method and now everything works fine. Thanks! :) – fonzane Jun 07 '20 at 22:11
Yes the OPTIONS method is the heck. – Ajay saini Jun 08 '20 at 07:32

score 0 · Answer 2 · answered Jun 07 '20 at 22:18

This code solved it for me:

@route('/contact', method=['POST', 'OPTIONS'])
def progress_contact():
  if request.method == 'OPTIONS':
    response.set_header('Access-Control-Allow-Origin', '*')
    response.set_header('Access-Control-Allow-Methods', 'PUT, GET, POST, OPTIONS, DELETE')
    response.set_header('Access-Control-Allow-Headers', 'Access-Control-Allow-Origin, Content-Type, Accept, Accept-Language, Origin, User-Agent')

  else:
    print(request.json['email'])
    return 'hello'

Handling an Angular HTTP Request with a Bottle Server CORS not allowed

2 Answers2