REACT and FLASK APP - -Uncaught DOMException: Blocked a frame with origin "http://localhost:5000" from accessing a cross-origin frame

Question

I guys, I've a problem with Cors, I am creating an application using React JS and Flask. I am forced to render an HTML file inside it and for this I am using

const iframeRef = useRef();

    useEffect(() => {
            window.iframeCallback = function (h) {
                iframeRef.current.style.height = `${h + 50}px`
            }
        }, []);



return(
         <iframe ref={iframeRef} "http:localhost:5000/file.html" />
)

in file HTML I have this function

<script>
    window.addEventListener('load', ()=>{
      if (window.parent.iframeCallback){
        window.parent.iframeCallback(document.querySelector('body').clientHeight)
      }
    })

    window.addEventListener('resize', ()=>{
      if (window.parent.iframeCallback){
        window.parent.iframeCallback(document.querySelector('body').clientHeight)
      }
    })
  </script>

the file is rendered but the script does not work. Also this error appears in the console:

Uncaught DOMException: Blocked a frame with origin "http://localhost:5000" from accessing a cross-origin frame. at http://localhost:5000/file.html

Below I put my server Flask

from flask_cors import CORS,
from flask import Flask,

app = Flask(__name__, static_folder="../build", static_url_path='/')

cors_config = {
  "origins": ["http://localhost:5000"],
  "methods": ["OPTIONS", "GET", "POST"],
  "allow_headers": ["Authorization", "Content-Type"]
}

cors = CORS(app, resources={"/*": cors_config}, supports_credentials=True)

I tried to do some tests with curl and the result is this:

$ curl -v -X OPTIONS  http://localhost:5000/test
*   Trying 127.0.0.1:5000...
* TCP_NODELAY set
* Connected to localhost (127.0.0.1) port 5000 (#0)
> OPTIONS /api/mytime HTTP/1.1
> Host: localhost:5000
> User-Agent: curl/7.68.0
> Accept: */*
> 
* Mark bundle as not supporting multiuse
* HTTP 1.0, assume close after body
< HTTP/1.0 200 OK
< Content-Type: text/html; charset=utf-8
< Allow: HEAD, OPTIONS, GET
< Access-Control-Allow-Origin: http://localhost:5000
< Access-Control-Allow-Credentials: true
< Content-Length: 0
< Server: Werkzeug/1.0.1 Python/3.8.5
< Date: Fri, 30 Apr 2021 10:02:51 GMT
< 
* Closing connection 0

does anyone know how i can remove the error in console?

REACT and FLASK APP - -Uncaught DOMException: Blocked a frame with origin "http://localhost:5000" from accessing a cross-origin frame

0 Answers0