CORS 'Access-Control-Allow-Origin' from Next JS + TextureLoader

Questions
, ,
1

Hi!
I get the error:

Access to image at
'https://api-omarov.ru/images/%D0%90%D0%B2%D0%B3%D1%83%D1%81%D1%82%D0%BE%D0%B2%D0%B8%D1%87_%D0%90%D0%BB%D0%B5%D0%BA%D1%81%D0%B5%D0%B9_%D0%98%D0%B2%D0%B0%D0%BD%D0%BE%D0%B2%D0%B8%D1%87/original/%D0%A1%D0%BE%D0%B2%D1%80%D0%B5%D0%BC%D0%B5%D0%BD%D0%BD%D1%8B%D0%B9_%D0%B1%D0%B0%D0%BB%D0%B5%D1%82.webp '
from origin 'http://localhost:5050 '
has been blocked by CORS policy: No 'Access-Control-Allow-Origin'
header is present on the requested resource.
  • this happens when a request is made to the Django server. CORS is configured, and allowed domains are also added, but CORS headers are not present in the HTTP response. All images from this site are loaded well in the Image components from Next JS, as well as in the usual img element.
    The error is present with both localhost and vercel.app.
    When specifying a different image URL (another site), everything works as it should.
    And I also want to note that loader.load(“url…”) returns null in the img property.
    Tell me how I can solve this problem.
useEffect(() => {
    setDomLoaded(true);

    const loader = new TextureLoader();
    loader.load(
      art,
      (loadedTexture) => {
        setTexture(loadedTexture);
      },
      undefined,
      (error) => {
        console.error('Texture loading error:', error);
      }
    );
  }, [art]);

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'django_extensions',
    'rest_framework',
    'corsheaders',
    'gallery',
]

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

CORS_ALLOWED_ORIGINS = [
    'http://localhost:5050',
    ...
]

All errors go away if I use a browser plugin that eliminates the CORS restrictions imposed by the browser.

Thank you in advance.

2

Problem solved, just added to request additional accessible url. Like

loader.loadAsync(
      `site allowed?url=${art}`,
    )

It`s for Next JS