Vue 与Django配合,在开发过程中遇到的跨域访问问题

Vue能快速构建网站框架及前端样式使其确定了其在前端页面开发的地位.

而Django框架作为服务后端的也是非常便利的.

为了使这两个框架结合,利用各自框架的优点,对野生程序员来说是一个很nice的事情.

这个其实在我在以前就实现了,但是现在回过头来查看项目时以及闭上眼睛回顾开发过程时,确实一片空白---全忘记了.

可能是因为简单

思虑很多会以后,我认为应该是开发过程中遇到的问题的太多,而且也不成体系,每一步都是:

确定开发需求----->首次完成开发代码----->运行编译出现bug/无限无法解决的错误----->开始在网络上各种扒解决方法---->拷贝代码----->解决问题--->完成需求---->下一个需求

在这个过程中从来没有做过以下几件事情:

1\认真分析原因,确定根本错误.

2\总结处理过程(写个博客),消化处理问题的方法

3\组织整个过程处理的问题,并形成系统.

所以,才会出现虽然完成了项目,但是不具备项目复制开发的能力.

就是那种不知道怎么过的河,下一次就会被淹死的那种.

 

话不多说,来今天的主要问题:

Vue+Django的开发过程中出现的 跨域问题

 

 

 这种情况的产生是因为,vue在开发过程是在自己的一个开发服务器环境下运行的,如:

 

 

 而Django 服务器也是要运行在一个域名下面如:

 

 

这就出现了跨域请求:

从 :8080 向 :8008 服务器发起了请求.

这改怎么解决呢?

#使用第三方包

#安装第三方包
pip install django-cors-headers

#配置安装包
INSTALLED_APPS = [
    ...
    'corsheaders'
    ...
]

#配置中间件
MIDDLEWARE = [  # Or MIDDLEWARE_CLASSES on Django < 1.10
    ...
    'corsheaders.middleware.CorsMiddleware',#放到中间件顶部
    'django.middleware.common.CommonMiddleware',
    ...
]
#配置settings
CORS_ORIGIN_ALLOW_ALL = True # 允许任何域访问
# 或指定域/ip访问
CORS_ORIGIN_WHITELIST = [
    "https://example.com",
    "https://sub.example.com",
    "http://localhost:8080",
    "127.0.0.1:9000"
]
# 甚至可以使用正则限制域
CORS_ORIGIN_REGEX_WHITELIST = [
    r"^https://\w+\.example\.com$",
]
# 以上设置一个(三选一)即可


#其他配置
# 在某些url上使用这个跨域中间件
CORS_URLS_REGEX = r'^/api/.*$'

# 允许的http请求
CORS_ALLOW_METHODS = [
    'DELETE',
    'GET',
    'OPTIONS',
    'PATCH',
    'POST',
    'PUT',
]

# 允许的请求头
CORS_ALLOW_HEADERS = [
    'accept',
    'accept-encoding',
    'authorization',
    'content-type',
    'dnt',
    'origin',
    'user-agent',
    'x-csrftoken',
    'x-requested-with',
]

 

通过上述方式可以解决开发过程中的跨域问题.

那在开完成后,项目部署过程中怎么弄呢?

这个我们在后面验证后回答!

先给自己挖个坑!