title: iframe not support by any browser
body: <p>I am getting this error in my console tab </p>
  
  <blockquote>
    <p>Load denied by X-Frame-Options: “DENY” from
    “<a href="http://localhost:8000/media/song/bensound-betterdays.mp3" rel="nofollow noreferrer">http://localhost:8000/media/song/bensound-betterdays.mp3</a>”, site does
    not permit any framing. Attempted to load into
    “<a href="http://localhost:3000/home" rel="nofollow noreferrer">http://localhost:3000/home</a>”.</p>
  </blockquote>
  
  <p>I also followed this <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options" rel="nofollow noreferrer">link</a> to solve this problem, but it didn't help.</p>
  
  <p>api-data:</p>
  
  <pre><code>[
      {
          "id": 1,
          "song": "http://localhost:8000/media/song/bensound-betterdays.mp3",
  
      },
  ]
  
  </code></pre>
  
  <p><br/>
  settings.py</p>
  
  <pre><code>CORS_ALLOW_HEADERS = [
      'accept',
      'accept-encoding',
      'authorization',
      'content-type',
      'dnt',
      'origin',
      'user-agent',
      'x-csrftoken',
      'x-requested-with',
  ]
  
  </code></pre>
  
  <p><br/>
  ./src/Home.js</p>
  
  <pre><code>import React, {Component} from "react";
  
  class App extends Component{
  
  
      constructor(props) {
      super(props);
  
  
      this.state = {
        response: "",
      };
  
    }
  
    componentDidMount() {
      this.fetchData();
    }
  
  
    fetchData = async () =&gt; {
  
      try {
        const response = await fetch(
          `http://localhost:8000/api/music`
        );
        const JsonResponse = await response.json();
        this.setState({ response: JsonResponse });
      } 
      catch (error) {
        console.log(error);
      }
    };
  
  
      render(){
  
          const { response } = this.state;
  
           if (!response) {
            return "Loading...";
          }
  
          return(
  
                       &lt;div class="home"&gt;
  
                           {response.map((response) =&gt;(
  
                              &lt;div class="home_content"&gt;
                                  &lt;div class="track track_home"&gt;
                                      &lt;iframe width="100%" height="166" src={response.song}&gt;&lt;/iframe&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
  
  
  
                              ))}
  
                          &lt;/div&gt;
  
              )
      }
  }
  
  export default App;
  
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/ajNPc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ajNPc.png" alt="![enter image description here"></a></p>