Next.js 14.2.1 + Yandex.Map Api ошибка No 'Access-Control-Allow-Origin' header is present on the requested resource

Question

Не могу вызвать карту через Script на localhost. Выползает ошибка No 'Access-Control-Allow-Origin' header is present on the requested resource. На Next.js 14.0.2 все работает

layout.js

import { YMapLoader } from "../components/YMapLoader/YMapLoader";

export const metadata = {
    title: "IP-ADDRESS-TRACKER",
    description: "Frontend mentor challenge",
};

export default function RootLayout({ children }) {
    return (
        <html lang="en">
            <body className="min-h-screen bg-dark-gray">
                {children}
                <YMapLoader />
            </body>
        </html>
    );
}

page.js

"use client";
import dynamic from "next/dynamic";

const Map = dynamic(() => import("@/app/components/Map/Map"), { ssr: false });

export default function About() {
    return (
        <>
            <main className="relative">
                <Map />
            </main>
        </>
    );
}

YMapLoader.js

import Script from 'next/script';

const MAP_API_KEY = process.env.MAP_API_KEY;

export const YMapLoader = () => {
  return (
    <>
      <Script
        src={`https://api-maps.yandex.ru/3.0/?apikey="ключ"&lang=en_US`}
        type="module"
        strategy="beforeInteractive"
      />
    </>
  );
};

map.js

'use client';
import Image from 'next/image';
import React from 'react';
import ReactDOM from 'react-dom';

const ymaps3Reactify = await ymaps3.import('@yandex/ymaps3-reactify');
const reactify = ymaps3Reactify.reactify.bindTo(React, ReactDOM);
const { YMap, YMapDefaultSchemeLayer, YMapDefaultFeaturesLayer, YMapControls, YMapMarker } =
  reactify.module(ymaps3);

const { YMapZoomControl } = reactify.module(await ymaps3.import('@yandex/[email protected]'));

const Map = () => {
  const location = { center: [55.751574, 37.573856], zoom: 13 };

  return (
    <YMap location={location} className="min-h-[calc(100vh-300px)] md:min-h-[calc(100vh-280px)]">
      <YMapControls position="left">
        <YMapZoomControl />
      </YMapControls>

      <YMapDefaultSchemeLayer />
      <YMapDefaultFeaturesLayer />

      <YMapMarker coordinates={location.center} zIndex={1}>
        <div className="relative h-[56px] w-[46px]">
          <Image src="/icon-location.svg" alt="location" fill />
        </div>
      </YMapMarker>
    </YMap>
  );
};

export default Map;

БЛОГ НА HUSL

Next.js 14.2.1 + Yandex.Map Api ошибка No 'Access-Control-Allow-Origin' header is present on the requested resource

Ответы (0 шт):