Django+Vue 前后端分离项目的跨域请求问题

产生问题：

Access to XMLHttpRequest at 'http://127.0.0.1:8000/categorys/' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

分析：
接口调试的时候，前端 vue 使用的端口是 8080，而请求的后端服务器使用的端口是 8000，两者之间跨端口，这里已经产生前后端跨域请求的问题，从浏览器角度是禁止跨域请求的。

解决：

• 从前端vue角度进行解决：在 vue 中设置 proxy 代理、
• 从后端django角度解决：借助 django-cors-headers 模块，实现服务器端的跨域请求

本例中主要从后端服务器角度解决跨域请求的问题，使用 django-cors-headers 模块解决跨域问题：

1. 首先使用 pip install django-cors-headers 进行安装安装
2. 在 settings.py 中的 INSTALLED_APPS 添加 'corsheaders'
3. 在MIDDLEWARE中添加中间件 'corsheaders.middleware.CorsMiddleware'，该中间件需要放在’django.middleware.csrf.CsrfViewMiddleware’ 之前。
4. 在settings.py进行相关配置
   设置 CORS_ORIGIN_ALLOW_ALL：值为 True 则表示所有域名下都能访问（忽略跨域问题），默认为 False。

   CORS_ORIGIN_ALLOW_ALL = True    

   设置 CORS_ORIGIN_WHITELIST：允许访问的白名单，只有在白名单内的可以忽略跨域问题访问（该项的设置只有在CORS_ORIGIN_ALLOW_ALL设置为False时有效）：

   CORS_ORIGIN_ALLOW_ALL = False  # 此时，该值必须设置为False
   CORS_ORIGIN_WHITELIST = (
       # 凡是出现在白名单中的域名，都可以访问后端接口
       '127.0.0.1:8080',
       'localhost:8080',
       'www.meiduo.site:8080',
       'api.meiduo.site:8000'
   )

   设置 CORS_ALLOW_CREDENTIALS：指明在跨域访问中，后端是否支持对cookie的操作，默认是True。

   CORS_ALLOW_CREDENTIALS = True

django-cors-headers 为开源项目，更多功能配置参考项目地址：https://github.com/adamchainz/django-cors-headers