任何浏览器都不支持 iframe答案

【问题标题】：iframe not support by any browser任何浏览器都不支持 iframe
【发布时间】：2020-09-20 17:46:01
【问题描述】：

我在控制台选项卡中收到此错误

X-Frame-Options 拒绝加载：“DENY”来自 “http://localhost:8000/media/song/bensound-betterdays.mp3”，网站有不允许任何取景。试图加载到 “http://localhost:3000/home”。

我也跟着这个link解决了这个问题，但是没有帮助。

api 数据：

[
    {
        "id": 1,
        "song": "http://localhost:8000/media/song/bensound-betterdays.mp3",

    },
]

设置.py

CORS_ALLOW_HEADERS = [
    'accept',
    'accept-encoding',
    'authorization',
    'content-type',
    'dnt',
    'origin',
    'user-agent',
    'x-csrftoken',
    'x-requested-with',
]

./src/Home.js

import React, {Component} from "react";

class App extends Component{


    constructor(props) {
    super(props);


    this.state = {
      response: "",
    };

  }

  componentDidMount() {
    this.fetchData();
  }


  fetchData = async () => {

    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(

                     <div class="home">

                         {response.map((response) =>(

                            <div class="home_content">
                                <div class="track track_home">
                                    <iframe width="100%" height="166" src={response.song}></iframe>
                                </div>
                            </div>



                            ))}

                        </div>

            )
    }
}

export default App;

【问题讨论】：

什么您在http://localhost:8000 下运行/提供内容？这是此处需要允许框架的部分，而不是您在 http://localhost:3000 下运行的反应应用程序@
错误信息已经够清楚了。您正在加载的 URL 禁止您将其放入框架中。它是本地主机，所以你应该能够改变它。不过我们也帮不上忙。您还没有向我们展示设置该标头的代码。
@CBroe api 数据来自http://localhost:8000
@bounty — 您的编辑包含更多代码，这些代码没有设置该标题所以????????‍♂️
我不是在直接谈论您的 API 端点，而是在您请求 http://localhost:8000/media/song/bensound-betterdays.mp3 时提供响应的任何内容。

标签： javascript html reactjs iframe django-rest-framework

【解决方案1】：

将 settings.py 更改为：

X_FRAME_OPTIONS = 'http://localhost:8000'

【讨论】：