0

I am trying to make a simple chrome extension AI email SPAM/HAM classifier.

It is a chrome extension that when clicked shows a popup in a quarter of the screen that looks like this

enter image description here

and when clicking the button it would send the message to a python flask server in order to apply the ML model and then return the result (wether its spam or ham) but i am unable to get past the CORS restrictions and get the following message

enter image description here

which i can not get rid off, even with a CORS blocker browser extension.

here is my code:

popup.html

<!DOCTYPE html>
<html>
  <head>
    <title>My Extension Popup</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        font-size: 14px;
        margin: 0;
        padding: 10px;
        width: 100vw;
        height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }

      #logo {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-bottom: 10px;
      }

      #logo img {
        width: 300px;
        height: 200px;
        margin-bottom: 5px;
      }

      #title {
        text-align: center;
      }

      input[type="text"] {
        display: block;
        width: 100%;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 4px;
        box-sizing: border-box;
        margin-bottom: 10px;
        font-size: 16px;
      }

      button {
        display: block;
        background-color: #4CAF50;
        color: white;
        padding: 10px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-size: 16px;
      }

      button:hover {
        background-color: #3e8e41;
      }
    </style>
    <script src="popup.js"></script>
  </head>
  <body>
    <div id="logo">
      <img src="logo.png">
      <h1>Baye's Based Spam or Ham AI Classifier </h1>
      <h4>By Alex Besse Donato</h4>

    </div>
    <div id="title">
      <h2>Enter your email content here:</h2>
    </div>
    <div>
        <form id="myForm">
            <input type="text" id="myInput">
            <button id="myButton">Send Message to get Analyzed</button>
          </form>
    </div>
  </body>
</html>

popup.js

document.addEventListener("DOMContentLoaded", function() {
  var myForm = document.getElementById("myForm");

  myForm.addEventListener("submit", function(event) {
    event.preventDefault();
    
    var input = document.getElementById("myInput").value;
    var url = "http://localhost:5000/analyze";

    fetch(url, {
      method: "POST",
      body: JSON.stringify({ input: input }),
      headers: {
        "Content-Type": "application/json"
      }
    })
    .then(response => response.json())
    .then(data => {
      console.log(data);
    })
    .catch(error => console.error(error));
  });
});

webserver.py

from flask import Flask, request, jsonify
from flask_cors import CORS, cross_origin



app = Flask(__name__)
CORS(app)

@app.route('/analyze', methods=['POST'])
@cross_origin()
def analyze():
    input = request.json['input']
    
    # Your code to analyze the input goes here
    
    result = {"this is a test"}  # Replace with your analysis result
    return jsonify(result)
    

if __name__ == '__main__':
    app.run(debug=True)

any ideas why I might keep getting CORS errors, even with a CORS browser extension?

Alex Besse
  • 19
  • 2
  • At first glance, the answer by Brad [here](https://stackoverflow.com/a/56502776/240443) might be relevant? – Amadan Feb 20 '23 at 07:30
  • You likely need to explicitly allow request header `Content-Type` in your CORS configuration. See https://flask-cors.readthedocs.io/en/latest/configuration.html – jub0bs Feb 20 '23 at 07:36

1 Answers1

-1

Your error is not related with CORS policy, see error log on server side:

TypeError: Object of type set is not JSON serializable

So you may replace

result = {"this is a test"} # Replace with your analysis result

on (for example):

result = {"body":"this is a test"} # Replace with your analysis

to make the python dictionary

Alexey
  • 54
  • 7