仅在访问媒体文件时出现 Cors Header 错误，应用程序的其余部分工作正常（DRF、pythonanywhere、React）

Posted 2023-03-03

【中文标题】仅在访问媒体文件时出现 Cors Header 错误，应用程序的其余部分工作正常（DRF、pythonanywhere、React）

【英文标题】：Only get Cors Header error when accessing media files, rest of the app works fine (DRF, pythonanywhere, React)

【发布时间】：2021-08-07 16:46:58

【问题描述】：

这在 chrome 和 firefox 上都会发生。在我尝试访问上传的 mp3 媒体文件之前，我有一个 react 应用程序可以与我的 django rest 框架后端进行良好的通信。然后我得到：

" 已被 CORS 策略阻止：请求的资源上不存在“Access-Control-Allow-Origin”标头。如果不透明的响应满足您的需求，请将请求的模式设置为“no-cors”以获取禁用 CORS 的资源。”

如果我点击 chrome 控制台中的错误媒体链接，它会将我带到上传的 mp3 并且可以正常播放。

我的应用部署在 Pythonanywhere 上。我的设置.py：

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'tagging',
    'rest_framework',
    'corsheaders',
    'rest_framework.authtoken',
]

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
...

STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'STATIC')

MEDIA_URL = '/media/'

MEDIA_ROOT = os.path.join(BASE_DIR, 'MEDIA')

CORS_ALLOW_ALL_ORIGINS = True


REST_FRAMEWORK = 
    'DEFAULT_AUTHENTICATION_CLASSES': [
        'rest_framework.authentication.TokenAuthentication',
    ]

网址：

urlpatterns = [
    path('admin/', admin.site.urls),
    path('api/', include('tagging.urls')),
    path('api/api-token-auth/', views.obtain_auth_token)
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

我在 pythonanywhere 网络应用程序中设置了静态和媒体文件：

网址：/STATIC/ 目录：/home/username/project/STATIC

网址：/MEDIA/ 目录：/home/username/project/MEDIA

不知道为什么会这样，任何帮助将不胜感激。

【问题讨论】：

如何为您的应用提供服务？ （反向代理？，nginx？apache？）

nginx 我相信。我意识到这与我如何通过 wavesurferjs 调用媒体有关。仍然无法; 不知道如何解决它

【参考方案1】：

如果您想提供带有 CORS 标头的静态文件，那么您需要从您的 Web 应用程序中提供它们，而不是使用静态文件映射。

【讨论】：

如何在 PythonAnywhere 上使用 Django Rest Framework 进行配置？当我尝试在我的 OP 中使用相同的 url 模式这样做时，我得到 404。我在 python 任何地方都可以找到关于媒体 URL 的论坛是人们说要像静态文件一样映射文件

【参考方案2】：

如果您有权访问 nginx 配置文件，请查看您的服务器配置。如果有media 的位置，则应手动添加所需的标头。

该问题与媒体文件由 nginx 而非您的应用程序提供的事实有关，因此 django corsheaders 对这些资源没有影响：

server 
        ...

        location /media/ 
            add_header Access-Control-Allow-Origin *;
            root /path/to/your/project/root;
        

【讨论】：

感谢您的帮助，但显然 pythonanywhere 不允许您配置 nginx 配置文件