Feature(HW09): Run frontend and backend on different origins

.gitignore

@@ -40,7 +40,6 @@ _ReSharper*/
 ### .NET / ASP.NET Core
 # Keep base appsettings.json in repo; ignore local/env-specific
 appsettings.Development.json
-.env
 
 # DP keys Api
 docker/dpkeys/*.xml

backend/PromoCodeFactory.WebHost/Program.cs

@@ -13,13 +13,26 @@
 
 builder.Services.AddOpenApi(builder.Environment);
 
+builder.Services.AddCors(options =>
+{
+    options.AddPolicy("Frontend", policy =>
+    {
+        policy
+            .WithOrigins("http://app.test.me:5173")
+            .AllowAnyHeader()
+            .AllowAnyMethod();
+    });
+});
+
 var app = builder.Build();
 
 app.UseExceptionHandler();
 
 app.MapOpenApi();
 app.MapSwaggerUI();
 
+app.UseCors("Frontend");
+
 app.MapControllers();
 
 app.MigrateDatabase();

backend/PromoCodeFactory.WebHost/Properties/launchSettings.json

@@ -1,14 +1,14 @@
 {
   "profiles": {
     "PromoCodeFactory.WebHost": {
-      "commandName": "Project",
-      "launchUrl": "swagger",
-      "dotnetRunMessages": true,
-      "launchBrowser": true,
-      "applicationUrl": "https://localhost:8090;http://localhost:8091",
-      "environmentVariables": {
-        "ASPNETCORE_ENVIRONMENT": "Development"
-      }
+        "commandName": "Project",
+        "launchUrl": "swagger",
+        "dotnetRunMessages": true,
+        "launchBrowser": true,
+        "applicationUrl": "https://api.test.me:8090;http://api.test.me:8091",
+        "environmentVariables": {
+            "ASPNETCORE_ENVIRONMENT": "Development"
+        }
     }
   }
 }

frontend/.env

@@ -0,0 +1 @@
+VITE_API_BASE_URL=http://api.test.me:8091

frontend/src/common/http.ts

@@ -0,0 +1,5 @@
+const API_BASE_URL = import.meta.env.VITE_API_BASE_URL;
+
+export async function apiFetch(path: string, init?: RequestInit) {
+  return fetch(`${API_BASE_URL}${path}`, init);
+}

frontend/src/components/private/PartnerLimits.tsx

@@ -6,6 +6,7 @@ import type { UiState } from "../../common/types";
 import { PartnerSchema, type PartnerDto } from "../public/zodType";
 import { ResultBlock } from "../common/ResultBlock";
 import { SuccessResultPartnerLimit } from "./SuccessResultPartnerLimit";
+import { apiFetch } from "../../common/http";
 
 export function PartnerLimits() {
   const partnerId = useAppSelector(state => state.demoIdentity.partnerId);
@@ -22,7 +23,7 @@ export function PartnerLimits() {
         }
 
         const url = `/api/v1/partners/${encodeURIComponent(partnerId)}`;
-        const response = await fetch(url);
+        const response = await apiFetch(url);
 
         await sleep(500);
 

frontend/src/components/private/PartnerProfile.tsx

@@ -6,6 +6,7 @@ import type { UiState } from "../../common/types";
 import { PartnerSchema, type PartnerDto } from "../public/zodType";
 import { ResultBlock } from "../common/ResultBlock";
 import { SuccessResultPartnerProfile } from "./SuccessResultPartnerProfile";
+import { apiFetch } from "../../common/http";
 
 export function PartnerProfile() {
   const partnerId = useAppSelector(state => state.demoIdentity.partnerId);
@@ -22,7 +23,7 @@ export function PartnerProfile() {
         }
 
         const url = `/api/v1/partners/${encodeURIComponent(partnerId)}`;
-        const response = await fetch(url);
+        const response = await apiFetch(url);
 
         await sleep(500);
 

frontend/src/components/public/FetchApi.tsx

@@ -5,6 +5,7 @@ import { Title,Text, Stack, Button } from "@mantine/core";
 import { sleep } from "../../common/tools";
 import type { UiState } from "../../common/types";
 import { SuccessResultCustomer, } from "./SuccessResultCustomer";
+import { apiFetch } from "../../common/http";
 
 const idGood = "a3f767aa-1918-4b0d-a3c9-37e5a0e5f3b2";
 const idBad = "a3f767aa-1918-4b0d-a3c9-37e5a0e5f3b3";
@@ -16,7 +17,7 @@ export function FetchApi() {
     setUiState({ kind: "loading" });
     try {
       const urlGetCustomerById = `/api/v1/customers/${encodeURIComponent(id)}`;
-      const response = await fetch(urlGetCustomerById);
+      const response = await apiFetch(urlGetCustomerById);
       await sleep(500);
       if (!response.ok) {
         throw new Error(`HTTP error! status: ${response.status}`);

frontend/vite.config.ts

@@ -7,6 +7,8 @@ const target = process.env.API_URL || 'http://localhost:8091';
 export default defineConfig({
   plugins: [react()],
   server: {
+    host: "app.test.me",
+    port: 5173,
     proxy: {
       '/api': {
         target,