Ошибка Cors с использованием Cross Origin из приложения Create-React-App ⇐ Javascript

[Anonymous]

Я получаю ошибку Cors в Chrome ...

Доступ к Xmlhttprequest at http: // localhost: 8008/api/landing-page/b1 из https https: // localhost: 4200 был заблокирован. Заголовок присутствует в запрошенном ресурсе.
post http: // localhost: 8008/api/landing-page/b1 net :: err_failed 200 (ok)

Это создает React-app, размещенный в локальном положении: Localhost: 8008. Я не думаю, что кто -то из них является уместным. Это действительно настройка разработки, но у меня нет проблем с общением с сервером React. Проблема возникает, когда я использую запрос на сервер React, чтобы сделать вложенный вызов на другой сервер. Я проверил с почтальником. Возвращает статус 200. < /P>
Я знаю, что могу отключить Cors на Chrome. Я не хочу этого делать, потому что это просто скрывает проблему. Я уверен, что когда я перейду к постановке, у меня будет та же проблема, только это будет сложнее диагностировать. < /P>
Вот соответствующий код на сервере React (4200) ... < /p>

Код: Выделить всё

const addLandingPageContent = async (landingPage: LandingPageModel) => {
const user = TokenService.getUser();
const baseUrl = process.env.REACT_APP_DESIGN_SERVER_URL;
const url = `${baseUrl}/api/landing-page/${landingPage.name}`;
const response = axiosInstance.post(
url, {
...landingPage
},
{
headers: {
"Content-Type": "application/json",
"Authorization": `Bearer ${user.accessToken}`,
}
}
);
return response;
}
< /code>
Вот соответствующий код на сервере 8008, который NextJs ... < /p>
import { LandingPageModel } from "@/shared/model/LandingPageModel";
import AffiliateService from "@/api/affiliate.service";
import axios from "axios";

export async function OPTIONS(request: Request): Promise {
console.log("Received OPTIONS request");
console.log("Request Headers:", request.headers);
const headers = new Headers();
headers.set('Access-Control-Allow-Origin', '*');
headers.set('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
headers.set('Access-Control-Allow-Headers', '*');
return new Response(null, { headers });
}

export async function POST(request: Request): Promise {
const authorization = request.headers.get("authorization");
axios.defaults.headers.common["Authorization"] = authorization || "";
const landingPageData: LandingPageModel = await request.json();
const landingPage = await AffiliateService.addLandingPage(landingPageData);
if(!landingPage) {
return Response.json({ error: "Failed to create landing page" }, { status: 400 });
}
const response = await AffiliateService.addLandingPageContent(landingPage);
if (!response) {
return Response.json({ error: "Failed to create landing page content" }, { status: 400 });
}
return Response.json(response.data, { status: 200 });
}

< /code>
Итак, я сыграл кучу игр с «ответом на возврат» на сервере 4200 ... ничего не работает.  Как это исправить?const addLandingPageContent = async (landingPage: LandingPageModel) => {
const user = TokenService.getUser();
const baseUrl = process.env.REACT_APP_DESIGN_SERVER_URL;
const url = `${baseUrl}/api/landing-page/${landingPage.name}`;
const response = await axiosInstance.post(
url,
{
...landingPage
},
{
headers: {
"Content-Type": "application/json",
"Authorization": `Bearer ${user.accessToken}`,
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Methods": "GET, POST, OPTIONS",
"Access-Control-Allow-Headers": "authorization,baggage,content-type,sentry-trace"
}
}
);
return response;
}

та же ошибка ...

Подробнее здесь: https://stackoverflow.com/questions/797 ... pplication