I have a Flask application containing various images displaying some clusters constructed by a K-Means algorithm. The user should be able to select one or several images and afterwards get redirected to a web-page where the clusters can be further assessed. The application worked as intended until I added basic access authentication.
Specifically, my (simplified) python script goes as follows:
from flask import Flask, render_template, request, redirect, url_for
from flask_cors import CORS
from flask_basicauth import BasicAuth
app=Flask(__name__)
app.config['BASIC_AUTH_USERNAME'] = os.environ['AUTH_USERNAME']
app.config['BASIC_AUTH_PASSWORD'] = os.environ['AUTH_PASSWORD']
app.config['BASIC_AUTH_FORCE']= True
basic_auth=BasicAuth(app)
CORS(app)
@app.route('/')
def show_index():
images=os.listdir(app.root_path+"/static/img/")
return render_template("cluster_images.html", cluster_images = images)
@app.route("/filter", methods=["POST", "GET"])
def filter():
if request.method=="POST":
sel=request.get_json()
#Do some operations with sel
The problem appears when I try to redirect to the /filter route from the main route which is done by "btn1". The following shows the function from "cluster_images.html" taking care the http request when btn1 is fired
$("document").ready(function() {
$("#btn1").click(function(){
$.ajax({
type: 'POST',
beforeSend: function(){
$('.loader')},
contentType: 'application/json',
url: "http://localhost:5000/filter",
dataType : 'html',
data : JSON.stringify(images), success: function(){window.location.href = "http://localhost:5000/filter"}
})
})
})
When I press the button I get the following error:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:5000/filter. (Reason: CORS preflight channel did not succeed).[Learn More]
