Django-cors-headers does not work with Expo-web

Question

I just ran an Expo-web development server at http://192.168.0.6:19006 and there appears many problems.

When I did not install django-cors-headers, only the main page was loaded and any others requests all failed. I soon realized that I had to install django-cors-headers. So I did. But then my web app fails to stay logged in. The login process itself is successful on the server side. The client receives a messages telling that the login was successful. But when it transitioned to the next page, it automatically fell back to the main page(as I set) because the app failed to stay logged in. I am assuming that there is something wrong with cookie credentials. But I set the credentials settings like below:

CORS_ORIGIN_WHITELIST = [
    'http://192.168.0.6:19006',
]
CORS_ALLOW_CREDENTIALS = True
SESSION_COOKIE_SAMESITE = None

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
...
]
INSTALLED_APPS = [
    ...
    'corsheaders',
]

Another issues is static files are not served with a CORS allowed header. Even if I use django-cors-headers and allow all settings, the static files fail to be loaded with an error message:

Access to XMLHttpRequest at 'http://192.168.0.6:8000/static/app%20Terms%20of%20Service.json' from origin 'http://192.168.0.6:19006' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Why does CORS_ALLOW_CREDENTIALS = True not work? Or is there something I am missing?

Is it working setting `CORS_ORIGIN_ALLOW_ALL` to True in your settings? — Julien Kieffer, Sep 05 '19 at 13:37
@JulienKieffer No, I have already tried that one and unfortunately it did not work for me. I guess the problem lies on the client side, not Django-cors-headers because I am using Apollo websocket. — Grateful, Sep 05 '19 at 21:11
I can see that headers are set to Access-Control-Allow-Credentials: true Access-Control-Allow-Origin: http://192.168.0.6:19006 and Set-Cookie:... so login was successful and cookie was sent. But it does not work with Apollo websocket. — Grateful, Sep 05 '19 at 22:06

score 0 · Answer 1 · answered Sep 07 '19 at 02:33

There were many problems.

First of all, for the client side, the problem was with axios.

You should set withCredentials: true for axios when you login and use cookie.

Next, static files do not go through Django middlewares, so you have to manually set CORS header for static files.

#vevn\Lib\site-packages\django\views\statics.py

content_type, encoding = mimetypes.guess_type(str(fullpath))
content_type = content_type or 'application/octet-stream'
response = FileResponse(fullpath.open('rb'), content_type=content_type)
response["Last-Modified"] = http_date(statobj.st_mtime)

# cors middleware hook
from corsheaders.middleware import CorsMiddleware
corsMiddlewareInstance = CorsMiddleware()
corsMiddlewareInstance.process_response(request, response)

if encoding:
    response["Content-Encoding"] = encoding
return response

Lastly, my <Image> component did not display on react-native-web. The reason for that was aspectRatio was no supported on react-native-web. You have to manually set width and height in accordance with your own proportionate.

<View onLayout={event => this.setState({
                                width: event.nativeEvent.layout.width
                            })}
    >
<Image source={{ uri: this.props.image.uri }}
                style={{
                        width: this.state.width,
                        height: this.state.width ? this.state.width * this.props.image.height / this.props.image.width : null,

Django-cors-headers does not work with Expo-web

1 Answers1