Chapter 09

AWS ECS frontend backend axios 共有

hello_yogurt
hello_yogurt
2022.07.23に更新

axiosをするとき、ローカルでは普通にできますが、本番ではfrontendとbackendを共有させるの難しいです。(axiosとcsrfの話です)

要は、違うドメインにはcsrftokenが発行されないので、Djangoが拒否しますよということ。

そこで、ECSの場合に、どうやってfrontendとbackendを共有させるか(ドメインを共存させるか)を説明します。ググってもほとんど出てこないから、苦労しました。

1.Route53でfrontend(http://ドメイン)、backend(http://backend.ドメイン)で作る
2.djangoのsetting.pyに「CSRF_COOKIE_DOMAIN = '.ドメイン'」を設定する(CORS_ORIGIN_WHITELIST = (ドメイン)も設定してください)

2をすることで、frontend側のcookieにもcsrf_tokenが発行されます。そのcsrf_tokenを使ってaxiosをするのです。しかし、django側でもどのページでcsrf_tokenが発行されるかは違います。なので、私は、djangoのインデックスページで発行するように設定(@ensure_csrf_cookie)し、frontendからaxiosのgetで取得するようにしました。

backend/myapp/views.py
from django.views.decorators.csrf import ensure_csrf_cookie

@ensure_csrf_cookie
def token_get(request):

    if request.method == 'GET':
        return JsonResponse({})
backend/myapp/urls.py
urlpatterns = [
path("", views.token_get, name="token_get"),
frontend/src/App.vue
mounted() {
        this.TokenGet();
    },
methods: {
TokenGet() {
        axios
          .get("/")
          .then(response => {
            this.info = response;
            console.log("取得成功", response);
          });
      },
}
    

main.jsで

axios.defaults.baseURL = "https://backend.ドメイン"

をしてます

js:backend/myproject/settings.py
CORS_ORIGIN_WHITELIST = (
    'https://ドメイン',
)

CORS_ALLOW_CREDENTIALS = True
CSRF_COOKIE_HTTPONLY = False

CSRF_COOKIE_DOMAIN = '.ドメイン'

公式に載ってます
CSRF_COOKIE_DOMAIN

https://docs.djangoproject.com/en/4.0/ref/settings/#csrf-cookie-domain