CORS error when using aiohttp and Angular8 how to set it up correctly?

Question

Python

Good afternoon.
Faced a problem.
There is a back on AIOHTTP. I'll attach the front in angular.
When trying to request api in the browser console, an error appears

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at 127.0.0.1:8080/api/v3/driver/all/. (Reason: CORS preflight response did not succeed).

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at 127.0.0.1:8080/api/v3/driver/all/. (Reason: CORS request did not succeed).

server and front on different ports. Server 8080 and front 4200. I understand that CORS is triggered. But my attempts to change anything did not help.
I tried to set up cors on the back like this

cors = aiohttp_cors.setup(app
                              , defaults={
        '*': aiohttp_cors.ResourceOptions(
            allow_credentials=True,
            expose_headers='*',
            allow_headers='*',
            allow_methods='*',
        )
    })

so

for route in list(app.router.routes()):
        cors.add(route, {
            "http://127.0.0.1:4200":
                aiohttp_cors.ResourceOptions(allow_credentials=True),
            "http://localhost:4200":
                aiohttp_cors.ResourceOptions(allow_credentials=True),
        })

    return app

But the result is the same.
An OPTIONS request is sent with a 400 status.


Moreover, I set up proxying from angular, and built the front into statics on the back. the result is the same... as if nothing has changed.
what could be wrong? How to set up correctly?

Answer 1

you don’t need to configure anything on the back and install nginx, the webpack out-of-the-box proxy for dev mode is enough
https://angular.io/guide/build#proxying-to-a-backe...
So something was done wrong.
and do not forget that you must send requests to 4200, there should not be any OPTIONS from the browser.
And it's better to run it explicitly by specifying the proxy config, likeng serve --proxy-config proxy.conf.json

Answer 2

Run nginx nearby (there is also a portable, and you can start in docker) and register your servers as upstream through nginx as a reverse proxy.
This will put all your servers on the same port and bring your development environment closer to what you will have in the prod.
It is possible to register some domain for 127.0.0.1 in hosts, so that it still looks more like a prod.
The problem will go away when origin matches the api call addresses.
But, obviously, you can also overcome the cors settings. The only question is why, if your api is intended for your site, and not for publication for an unlimited number of third-party sites.