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

@@ -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(){