solve Cors problem; connect leduc holdem GUI to Django backend

.gitignore

@@ -26,3 +26,6 @@ db.sqlite3
 __pycache__
 *.swp
 uploaded_agents
+
+# idea
+/.idea

public/config.js

@@ -1,4 +1,4 @@
 window.g = {
-    apiUrl: 'http://localhost:10080', // 配置服务器地址
+    apiUrl: 'http://127.0.0.1:8000', // 配置服务器地址
     // WebSocketUrl: '/api/' // 配置WebSocket地址
-};
+};

requirements.txt

@@ -2,3 +2,4 @@ rlcard
 Django
 tqdm
 tensorflow==1.14
+django-cors-headers

server/server/settings.py

@@ -27,6 +27,8 @@ DEBUG = True
 
 ALLOWED_HOSTS = []
 
+# Cors config
+CORS_ORIGIN_ALLOW_ALL=True
 
 # Application definition
 
@@ -37,10 +39,13 @@ INSTALLED_APPS = [
     'django.contrib.sessions',
     'django.contrib.messages',
     'django.contrib.staticfiles',
+    'corsheaders',
     'tournament',
 ]
 
 MIDDLEWARE = [
+    'corsheaders.middleware.CorsMiddleware',
+    'django.middleware.common.CommonMiddleware',
     'django.middleware.security.SecurityMiddleware',
     'django.contrib.sessions.middleware.SessionMiddleware',
     'django.middleware.common.CommonMiddleware',

src/view/LeducHoldemGameView.js

@@ -97,7 +97,7 @@ class LeducHoldemGameView extends React.Component {
                                 message: "Current player choose call but has bet more or equal to the upstream player",
                                 type: "error",
                                 showClose: true
-                            });        
+                            });
                         }
                         break;
                     case "Fold":
@@ -112,13 +112,13 @@ class LeducHoldemGameView extends React.Component {
                             const mes = `Player ${foldedId} folded, player ${winnerId} wins!`;
                             this.setState({ gameEndDialog: true, gameEndDialogText: mes });
                         }, 200);
-                        return gameInfo;  
+                        return gameInfo;
                     default:
                         Message({
                             message: "Error in player's latest action",
                             type: "error",
                             showClose: true
-                        });        
+                        });
                 }
                 gameInfo.turn++;
                 if(gameInfo.round !== 0 && gameInfo.turn === this.moveHistory[gameInfo.round].length){
@@ -140,7 +140,7 @@ class LeducHoldemGameView extends React.Component {
                     message: "Mismatch in current player & move history",
                     type: "error",
                     showClose: true
-                });        
+                });
             }
         }
         // if current state is new to game state history, push it to the game state history array
@@ -151,7 +151,7 @@ class LeducHoldemGameView extends React.Component {
                 message: "Inconsistent game state history length and turn number",
                 type: "error",
                 showClose: true
-            });        
+            });
         }
         return gameInfo;
     }
@@ -195,11 +195,11 @@ class LeducHoldemGameView extends React.Component {
 
     startReplay() {
         // for test use
-        const replayId  = 0;
+        const testUrl = '/tournament/replay?name=leduc-holdem&agent0=leduc-holdem-random&agent1=leduc-holdem-cfr&index=1';
 
         // start full screen loading
         this.setState({fullScreenLoading: true});
-        axios.get(`${this.apiUrl}/replay/leduc_holdem/${replayId}`)
+        axios.get(`${this.apiUrl}${testUrl}`)
             .then(res => {
                 res = res.data;
                 // init replay info
@@ -222,8 +222,16 @@ class LeducHoldemGameView extends React.Component {
                     // loop to update game state
                     this.gameStateTimer();
                 });
+            })
+            .catch(err => {
+                console.log(err);
+                Message({
+                    message: `Error in getting replay data: ${err}`,
+                    type: "error",
+                    showClose: true
+                });
+                this.setState({fullScreenLoading: false});
             });
-
     };
 
     pauseReplay(){
@@ -489,4 +497,4 @@ class LeducHoldemGameView extends React.Component {
     }
 }
 
-export default LeducHoldemGameView;
+export default LeducHoldemGameView;