Testar olika metoder för att hantera Cross-Origin Resource Sharing

smartassist/requirements_dev.txt

@@ -1,8 +1,9 @@
 # A requirements file for the project.
 #
-# Run 'pip install -r requirements.txt' to install all required packages.
+# Run 'pip install -r smartassist/requirements_dev.txt ' to install all required packages.
 
 
 ollama
 Flask
+flask_cors
 requests

smartassist/src/backend.py

@@ -2,15 +2,19 @@
 # Import the necessary functions from ollama, Flask, requests, threading
 from ollama import Client
 from flask import Flask, request, jsonify
+from flask_cors import CORS, cross_origin
 #import requests
 #import threading
 
 # Initialize a Flask application
 app = Flask(__name__)
+CORS(app)
 
+# @app.route('/api/chat', methods=['POST'])
+# @cross_origin(origin='http://localhost:8000', headers=['Content-Type']) # Allow cross-origin requests from localhost:8000
 @app.route('/api/chat', methods=['POST'])
+@cross_origin(origin='*', headers=['Content-Type'])  # Enable CORS for this route. Probably not necessary.
 def chat():
-    if request.method == 'POST':
     # Get the message from the JSON in the request body
     data = request.get_json()
     message = data.get('query')

smartassist/src/frontend.js

@@ -4,62 +4,62 @@ const chatbox = document.getElementById('chatbox');
 const userInput = document.getElementById('userInput');
 
 // Define a function to send the user's message to the AI
-// function sendMessage() {
-//   // Get the user's input message and trim any whitespace
-//     const message = userInput.value.trim();
-
-//     // Check if the message is not empty
-//     if (message !== '') {
-//         // Send a POST request to the /api/chat endpoint with the message
-//         fetch('/api/chat', {
-//             method: 'POST',
-//             headers: { 'Content-Type': 'application/json' },
-//             body: JSON.stringify({ message }),
-//         })
-//         .then(response => response.json())
-//         .then(data => {
-//             // Get the AI's response from the API data
-//             const aiResponse = data.response;
-
-//             // Render the user's original message in the chatbox
-//             renderMessage(message, 'user-message');
-
-//             // Render the AI's response in the chatbox
-//             renderMessage(aiResponse, 'ai-response');
-
-//             // Clear the user input field for the next message
-//             userInput.value = '';
-//         })
-//         .catch(error => console.error('Error sending message:', error));
-//     }
-// }
-
 function sendMessage() {
+  // Get the user's input message and trim any whitespace
     const message = userInput.value.trim();
+
+    // Check if the message is not empty
     if (message !== '') {
-    // Create a new XMLHttpRequest object
+        // Send a POST request to the /api/chat endpoint with the message
-    const xhr = new XMLHttpRequest();
+        fetch('http://localhost:5000/api/chat', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ message }),
+        })
+        .then(response => response.json())
+        .then(data => {
+            // Get the AI's response from the API data
+            const aiResponse = data.response;
 
-    // Configure the request
+            // Render the user's original message in the chatbox
-    xhr.open('POST', '/api/chat'); // Set method to POST and URL
+            renderMessage(message, 'user-message');
-    xhr.setRequestHeader('Content-Type', 'application/json'); // Essential for sending JSON
 
-    // Handle response data 
+            // Render the AI's response in the chatbox
-    xhr.onload = function() {
+            renderMessage(aiResponse, 'ai-response');
-      if (xhr.status >= 200 && xhr.status < 300) { // Successful response
-        const data = JSON.parse(xhr.responseText);
-        renderMessage(data.response, 'ai-response');
 
-      } else {
+            // Clear the user input field for the next message
-        console.error('Request failed. Status:', xhr.status);
+            userInput.value = '';
-      }
+        })
-    };
+        .catch(error => console.error('Error sending message:', error));
-
-    // Send the request
-    xhr.send(JSON.stringify({ message })); 
     }
 }
 
+// function sendMessage() {
+//   const message = userInput.value.trim();
+//   if (message !== '') {
+//     // Create a new XMLHttpRequest object
+//     const xhr = new XMLHttpRequest();
+
+//     // Configure the request
+//     xhr.open('POST', 'http://localhost:5000/api/chat'); // Set method to POST and URL
+//     xhr.setRequestHeader('Content-Type', 'application/json'); // Essential for sending JSON
+
+//     // Handle response data 
+//     xhr.onload = function() {
+//       if (xhr.status >= 200 && xhr.status < 300) { // Successful response
+//         const data = JSON.parse(xhr.responseText);
+//         renderMessage(data.response, 'ai-response');
+
+//       } else {
+//         console.error('Request failed. Status:', xhr.status);
+//       }
+//     };
+
+//     // Send the request
+//     xhr.send(JSON.stringify({ message })); 
+//   }
+// }
+
 
 // Define a function to render a message in the chatbox with a specific class name
 function renderMessage(text, className) {

smartassist/src/startservices.py

@@ -37,6 +37,6 @@ def start_backend():
         print(f"Failed to start backend: {e}")
 
 if __name__ == '__main__':
-    start_frontend()
+    start_frontend() # No need for this as the backend starts a web server on its own.
     start_backend()