Как исправить CORS 405 на next/vercel frontend w django/heroku backend?

У меня есть приложение Next, работающее на бэкенде Django, размещенном на Heroku. Недавно я перевел его с чистого React на Next и развернул на Vercel (ранее хостинг Firebase)... Я перепробовал все, что мог придумать, но не могу решить проблему CORS 405, которую получаю.

Я все еще не очень хорошо разбираюсь в CORS в целом, но я прочитал все, что смог найти об этом... Мои навыки в Django/Py ОЧЕНЬ начинающие... есть ли что-то очевидное, что я упускаю? Или у кого-нибудь из вас есть подсказка, как мне следует действовать, чтобы решить эту проблему? 

// Headers from console/network on attempted axios get(it works locally, and has been  working before I tried to deploy to Vercel):

// General:
// Request URL: herokuAppUrl.com
// Request Method: GET
// Status Code: 405 
// Referrer Policy: strict-origin-when-cross-origin

// Response headers:
// Allow: DELETE
// Connection: keep-alive
// Content-Length: 19
// Content-Type: text/plain; charset=utf-8
// Date: Tue, 26 Apr 2022 15:48:53 GMT
// X-Content-Type-Options: nosniff

// Request headers:
// Accept: application/json, text/plain, */*
// Accept-Encoding: gzip, deflate, br
// Accept-Language: en-GB,en-US;q=0.9,en;q=0.8
// Connection: keep-alive
// Host: git.heroku.com
// Origin: https://my.vercel.app
// Referer: https://my.vercel.app/
// Sec-Fetch-Dest: empty
// Sec-Fetch-Mode: cors
// Sec-Fetch-Site: cross-site
// Sec-GPC: 1
// User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) etc etc..

// I'm using the vercel recommended CORS config in next.config.js:
/** @type {import('next').NextConfig} */
const nextConfig = {
    reactStrictMode: true,
      async headers() {
        return [
          {
            // matching all API routes
            source: "/myAppUrl.com",
            headers: [
              { key: "Access-Control-Allow-Credentials", value: "true" },
              { key: "Access-Control-Allow-Origin", value: "/*" },
              { key: "Access-Control-Allow-Methods", value: "GET" },
              { key: "Access-Control-Allow-Headers", value: "X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version" },
            ]
          }
        ]
      }
    };

module.exports = nextConfig

// In the Django app I've added the vercel app to Whitelist(deprecated but should still work) in settings.py:

CORS_ORIGIN_WHITELIST = [
    'https://actualwebsiteurl.com',
    'http://localhost:3000',
    'https://my.vercel.app'
]

// ..and the heroku app url to ALLOWED_HOSTS in settings.py:

ALLOWED_HOSTS = [herokuApp.com]

Вернуться на верх