I have a app on 127.0.0.1:5000 that edits a page (html code) If I need to edit a picture on that page using a specialized editor I select the picture and then I fire up a call to 127.0.0.1:8000/picture_editor?picture_url="127.0.0.1:5000/static/uploads/picture.jpg
All good so far, I am able to edit the picture and I have code that should send the results back to the parent window and integrate the changes in the editor
The problem is that this triggers a CORS (cross origins resource sharing) security exception and the call does not complete Here is the error:
svg-editor.html?picture_url=http://127.0.0.1:5000/static/uploads/picture.jpg&width=225&height=276:64 Uncaught DOMException: Blocked a frame with origin "http://localhost:8000" from accessing a cross-origin frame.
What are my options to deal with this ? Is there any way to deal with this ? This is not really CORS site to site but rather the browser not allowing the communication betweek two windows that belong to different sites (although only the port differs)
My app is a flask application and I already enabled CORS there
app = Flask(__name__)
cors = CORS(app, resources={r"*": {"origins": "*"}})
But the browser is still reporting the above error.
Yes CORS has is actually specifically about this and it does not allow the code from a browser window accessing one site to interact with the code in another window that was loaded from another site As far as my problem goes I found that the editor has an ES6 version that can be loaded without running the Node server (in my case the server running on port 8000)
Toying with the CORS setttings for flask and Node.js (have no clue how to do that) proved to be insufficient for Flask (the above did not solve my problem) and proved to be too difficult for me to do it on Node.js which I do not know anything about