阻止来源为“http://127.0.0.1:8000”的框架访问跨源框架。 ((Django cors 标头，S3 cors 政策)) [关闭]

Question

https://sparta-games.net/games/list/47/ <-- !! Sound Too Loud !! I'm trying to lower the sound of iframe or the whole page.

所以，我在下面添加了脚本

iframe_element.onload = function() {
          var iframe_window = iframe_element.contentWindow;
          var audio_context = new (iframe_window.AudioContext || iframe_window.webkitAudioContext)();
          var gain_node = audio_context.createGain();
          gain_node.gain.value = 0; 
          
          gain_node.connect(audio_context.destination);
          
          var media_element = iframe_window.document.querySelector('canvas');
          if (media_element) {
              var source = audio_context.createMediaElementSource(media_element);
              source.connect(gain_node);
          }

          const volume_slider = document.createElement('input');
          volume_slider.type = 'range';
          volume_slider.min = '0';
          volume_slider.max = '1';
          volume_slider.step = '0.01';
          volume_slider.value = '0';
          volume_slider.id = 'volumeSlider';
          
          volume_slider.addEventListener('input', function() {
              gain_node.gain.value = this.value;
          });

          document.body.appendChild(volume_slider);
      };

但是没有成功。 我认为

querySelector('canvas')

之后的行被错误阻止了

确切的错误消息：

47/:644 Uncaught DOMException: Failed to read a named property 'AudioContext' from 'Window': Blocked a frame with origin "http://127.0.0.1:8000" from accessing a cross-origin frame.
    at iframe_element.onload (http://127.0.0.1:8000/games/list/47/:644:58)

Iframe 是一款 Unity WebGL 游戏，来自 S3 存储桶。

我正在使用 Django、EC2、mobaXterm、S3、nginx、gunicorn、RDS。 (Windows11)

我的设置 Django 设置.py：

INSTALLED_APPS = [
    ...,
    "corsheaders",
    ...,
]

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
    ...,
    'django.middleware.common.CommonMiddleware',
    ...,
]

X_FRAME_OPTIONS = 'SAMEORIGIN'

CORS_ALLOWED_ORIGINS = [
    "http://127.0.0.1:8000",
]

S3 CORS 政策：

{
    "CORSRules": [
        {
            "AllowedHeaders": [
                "*"
            ],
            "AllowedMethods": [
                "GET",
                "PUT",
                "HEAD"
            ],
            "AllowedOrigins": [
                "*"
            ],
            "ExposeHeaders": [
                "x-amz-server-side-encryption",
                "x-amz-request-id",
                "x-amz-id-2"
            ],
            "MaxAgeSeconds": 3000
        }
    ]
}

版本：

Django==4.2
django-cors-headers==4.3.1

像下面这样通过views.py发送标头也没有帮助。

def my_view(request):
    response = JsonResponse({'message': 'Hello, world!'})
    response['Access-Control-Allow-Origin'] = 'http://127.0.0.1:8000'
    response['Access-Control-Allow-Methods'] = 'GET, POST, OPTIONS'
    response['Access-Control-Allow-Headers'] = 'Content-Type'
    return response

我找不到这样的确切案例。 递归请ChatGPT解决。

django-cors-headers，s3策略，直接发送标头，cors白名单，... 没发现问题。

事实上，当用户修改并提交该页面的任何内容时也会发生这种情况。（CORS 的事情）

我在这个问题上花了将近 4 天的时间。请帮助我。

Answer 1

使用本地 IP 地址而不是本地主机，问题就会自行解决