CORS Issue AsyncHttpConsumer

[waqasraz]

Access to XMLHttpRequest at 'http://127.0.0.1:8001/test_middleware/' from origin 'http://127.0.0.1:8082' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Adding a header to each send response solve the above problem but I don't want to add a header to each response.

self.send_response(200, b"xxx"
headers=[
                (b"Content-Type", b"application/json"),
                (b"Access-Control-Allow-Origin", b"*"),
            ]
)

[Zarathustra2]

Seems like you want this: Django-Cors-Headers

[carltongibson]

Thanks @Zarathustra2, yes.

[matthiask]

I don't think django-cors-headers will work since, at least in my understanding, Django's middleware does not run when you're using AsyncHttpConsumer.

@waqasraz Maybe you have some luck using ASGI middleware from the Starlette project, e.g. https://www.starlette.io/middleware/#cors-preflight-requests

[Zarathustra2]

@matthiask totally forget about it, @carltongibson maybe reopen the ticket again and @waqasraz could you provide a minimal project for reproducing that issue?

[waqasraz]

@Zarathustra2
@matthiask is right middleware don't run when sending a request to AsyncHttpConsumer.

[softmarshmallow]

any updates for this?

[sidharthramesh]

All the http requests still seem to go through the MIDDLEWARE in settings.py if the application = ProtocolTypeRouter() does not define anything for http. I've some websocket consumers, but the http requests seem to go through the django-cors-headers as expected.

[matthiask]

@waqasraz Yes that's correct.

@sidharthramesh Requests which are handled by AsyncHttpConsumer do not go through Django at all (only through channels) and because of this Django's middleware does not run. So yes, django-cors-headers still handles requests to Django views but the same isn't true for equests handled by custom channels consumers.

[carltongibson]

This still seems the right answer:

Maybe you have some luck using ASGI middleware from the Starlette project, e.g. https://www.starlette.io/middleware/#cors-preflight-requests

Some ASGI middleware will be needed. This is probably out of scope for channels itself.

[jrayx]

Hi all, do you know how to mount the CORSMiddleware component from Starlette onto a Django Channels app?

At the Starlette documentation linked above (https://www.starlette.io/middleware/#cors-preflight-requests) there is a section at the bottom "Using middleware in other frameworks" where I tried to follow their suggestion, but I'm still getting a CORS error from my React app.

Here is my routing.py file:

from django.conf.urls import url
from channels.routing import ProtocolTypeRouter, URLRouter
from channels.auth import AuthMiddlewareStack
from channels.security.websocket import AllowedHostsOriginValidator, OriginValidator
from myapp.consumers import MyConsumer
from starlette.middleware.cors import CORSMiddleware

application = ProtocolTypeRouter({
    'websocket': AllowedHostsOriginValidator(
        AuthMiddlewareStack(
            URLRouter(
                [
                    url(r"my/url/pattern", MyConsumer()),
                ]
            )
        )
    )
})
 
application = CORSMiddleware(application, allow_origins=['127.0.0.1'])

I have also tried the same in my asgi.py file, still getting CORS error:

import os
import django
from channels.routing import get_default_application
from starlette.middleware.cors import CORSMiddleware

os.environ.setdefault("DJANGO_SETTINGS_MODULE", "cfehome.settings")
django.setup()

application = get_default_application()
application = CORSMiddleware(application, allow_origins=['127.0.0.1'])

[jrayx]

Ah whoops, just took a fresh look at this and realized I was missing the CORSMiddleware component from my wsgi.py as well (implemented about the same as how the asgi.py file looks). Everything is working now and getting no CORS error! Going to leave my previous comment up in case someone else runs into the same problem.

[carltongibson]

I'm going to convert this to a discussion, since I don't think it's an Issue per se.

Happy to link to a blog post or package wrapping up what's needed here.

[moritz89]

It would be really useful to have a list of useful middlewares for ASGI apps in the official Channels or Django documentation. Had to scrape mine together. And also write the one or the other.

from starlette.middleware.cors import CORSMiddleware
from starlette.middleware.trustedhost import TrustedHostMiddleware
from starlette.responses import RedirectResponse


class LoginRequiredMiddleware:
    """If user has not been authenticated, redirect to login page."""

    def __init__(self, inner, url: str):
        self.inner = inner
        self.url = url

    async def __call__(self, scope, receive, send):
        if user := scope.get("user"):
            if not user.is_anonymous:
                return await self.inner(scope, receive, send)
        response = RedirectResponse(self.url)
        return await response(scope, receive, send)

class TrustedHostExtendedMiddleware(TrustedHostMiddleware):
    def __init__(
        self,
        app: ASGIApp,
        allowed_hosts: Sequence[str] | None = None,
        www_redirect: bool = True,
        exclude_paths: Sequence[str] | None = None,
    ) -> None:
        super().__init__(app, allowed_hosts, www_redirect)
        self.exclude_paths = exclude_paths

    async def __call__(
        self, scope: Scope, receive: Receive, send: Send
    ) -> Coroutine[Any, Any, None]:
        if scope.get("path") in self.exclude_paths:
            await self.app(scope, receive, send)
        else:
            return await super().__call__(scope, receive, send)

...

application = ProtocolTypeRouter(
    {
        "http": URLRouter(
            [
                re_path("^graphql/", gql_http_consumer),
                re_path("^", django_asgi_app),
            ]
        ),
        "websocket": URLRouter(
            [
                re_path(r"graphql/", gql_ws_consumer),
                ...
            ]
        ),
    }
)


def SecurityStack(inner):
    """CORS and AllowedHost Checks."""

    cors = CORSMiddleware(
        inner,
        allow_origins=cors_conf.CORS_ALLOWED_ORIGINS,
        allow_methods=cors_conf.CORS_ALLOW_METHODS,
        allow_headers=cors_conf.CORS_ALLOW_HEADERS,
        allow_credentials=cors_conf.CORS_ALLOW_CREDENTIALS,
        max_age=cors_conf.CORS_PREFLIGHT_MAX_AGE,
    )
    return TrustedHostExtendedMiddleware(
        cors, settings.ALLOWED_HOSTS, exclude_paths=["..."]
    )


application = SecurityStack(application)