fix: Solve cross-domain issues (casbin#153)

app/components/ModelEditor.tsx

@@ -12,7 +12,13 @@ import { newModel } from 'casbin';
 import { setError } from '@/app/utils/errorManager';
 
 export const ModelEditor = ({ initialValue = '' }: { initialValue: string }) => {
-  const [modelText, setModelText] = useState(initialValue);
+  const [modelText, setModelText] = useState('');
+
+  useEffect(() => {
+    if (initialValue) {
+      setModelText(initialValue);
+    }
+  }, [initialValue]);
 
   const validateModel = useCallback(async (text: string) => {
     try {
@@ -74,4 +80,4 @@ export const ModelEditor = ({ initialValue = '' }: { initialValue: string }) =>
       </div>
     </div>
   );
-};
+};

app/model-editor/layout.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+export default function ModelEditorLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return <>{children}</>;
+}

app/model-editor/page.tsx

@@ -1,16 +1,22 @@
 'use client';
 
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { ModelEditor } from '../components/ModelEditor';
 
-const ModelEditorPage = ({ searchParams }: { searchParams: { model?: string } }) => {
-  const initialValue = searchParams.model ? decodeURIComponent(searchParams.model) : '';
+export default function ModelEditorPage() {
+  const [initialValue, setInitialValue] = useState('');
+
+  useEffect(() => {
+    const params = new URLSearchParams(window.location.search);
+    const modelParam = params.get('model');
+    if (modelParam) {
+      setInitialValue(decodeURIComponent(modelParam));
+    }
+  }, []);
 
   return (
     <div style={{ width: '100%', height: '100vh' }}>
       <ModelEditor initialValue={initialValue} />
     </div>
   );
-};
-
-export default ModelEditorPage;
+}

middleware.ts

@@ -0,0 +1,18 @@
+import { NextResponse } from 'next/server';
+import type { NextRequest } from 'next/server';
+
+export function middleware(request: NextRequest) {
+  const response = NextResponse.next();
+  const origin = request.headers.get('origin') || '*';
+
+  response.headers.set('Access-Control-Allow-Origin', origin);
+  response.headers.set('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
+  response.headers.set('Access-Control-Allow-Headers', 'X-Requested-With,content-type');
+  response.headers.set('Access-Control-Allow-Credentials', 'true');
+
+  return response;
+}
+
+export const config = {
+  matcher: '/model-editor/:path*',
+};