Django使用XHR下载媒体文件会导致CORS错误 [英] Django Downloading a media file using XHR gives CORS error

问题描述

我有一个项目，管理员在其中上传FBX文件，这些FBX文件是通过XHR调用获取的，并加载到Threejs.

I have a project where the admin upload FBX files, These FBX files are fetched through an XHR call and loaded to Threejs.

Django设置.

Requirement.txt

Requirement.txt

asgiref==3.2.3
Django==3.0.2
django-cors-headers==3.2.1
django-filter==2.2.0
djangorestframework==3.11.0
Markdown==3.1.1
pytz==2019.3
sqlparse==0.3.0

URL

urlpatterns = [
  path('admin/', admin.site.urls),
  path('fbx/', include('fbx.urls')),
]+ static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

Settings.py

Settings.py

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

MEDIA_ROOT = os.path.join(BASE_DIR,'media')
MEDIA_URL = '/media/'

上传模型

from django.db import models

class Fbx(models.Model):
    name = models.CharField(max_length=200)
    fbx = models.FileField(max_length=200, blank=True)
    normals = models.FileField(max_length=200, blank=True)
    bump = models.FileField(max_length=200, blank=True)
    texture = models.FileField(max_length=200, blank=True)
    status = models.BooleanField(default=False)
    pub_date = models.DateTimeField(auto_now=True)

进口和中间商品

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'corsheaders',
    'rest_framework',
    'fbx.apps.FbxConfig'
]

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
    'corsheaders.middleware.CorsMiddleware',
]

我没有上传问题，一切正常.

I have no issues with upload, everything works fine.

我正在使用Threejs FBXloader下载FBX.这是XHR呼叫.此呼叫失败.但是，如果我将相同的链接放在浏览器中，则可以正常工作.

I'm using Threejs FBXloader to download the FBX. This is an XHR call. This call fails. But if I put the same link on the browser it works fine.

对该文件 http://XXXX/media/correction_1.fbx 的XHR调用失败.但是当您将其放在浏览器中时可以使用.

The XHR call to this file http://XXXX/media/correction_1.fbx fails. But works when you put it in browser.

这里可能是什么问题?

推荐答案

Django不会通过中间件堆栈提供媒体文件，因此任何注入标头的尝试都是没有意义的.您需要在apache中启用CORS.病毒寄主的这种改变对我来说是成功的.

Django does not serve the media files through the middleware stack, so any attempts to inject headers are pointless. You need to enable the CORS in the apache. This change in the virutal host did it for me.

Alias /media/ /**<path to media>**/media/
<Directory /**<path to media>**/media>
    Header set Access-Control-Allow-Origin "*"
    Order allow,deny
    Allow from all
</Directory>

如果您无法访问病毒宿主，则可以在.htaccess中进行更改 https://enable-cors.org/server_apache.html

If you can not access the virutal host it is possible to do the change in the .htaccess https://enable-cors.org/server_apache.html

这篇关于Django使用XHR下载媒体文件会导致CORS错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！