DRF项目之解决浏览器同源策略问题

DRF项目，是一个前后端分离的Web框架。

本项目中，我们前端采用的是VUE框架。

前后端分离的情况就会出现一个问题，前端的Ajax请求无法请求到后端API（接口）。

那么，为什么会出现这种问题呢？

因为，浏览器的同源策略不允许，不同源的脚本（网站代码Ajax）在没有经过明确授权的情况下，去读写对方的资源。

既然提到了同源策略，我们就避免不了的需要了解一下子什么叫做源，什么又叫做同源、同源策略。

源：指的是在url中的协议、域名、端口号；

同源：当两个url的协议、域名、端口号都一致，那么，我们就称这两个url是同源的。

同源策略：指的是浏览器的一个安全功能，其作用就是让防止两个非同源的url进行通信。

既然，我们明确了问题的所在，那么，我们就要开始解决问题了。

这里，我们就需要使用到跨域来实现非同源之间url进行通信。

我们采用跨域的方式是跨域资源共享CORS（Cross-origin resource sharing）。

既然，我们知道了解决问题的方式，那么，我们就要将用代码来实现了。

首先，我们需要安装第三方模块，配合Django程序进行CORS的配置。

pip install django-cors-headers

然后，我们需要在项目的配置文件中，进行配置。

INSTALLED_APPS = [
    ...
 
    # 注册CORS跨域访问子应用
    'corsheaders',
 
]

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

这里，还需要配置请求的白名单。

# CORS
CORS_ORIGIN_WHITELIST = (
    'http://127.0.0.1:8080',
    'http://localhost:8080',
    'http://www.meiduo.site:8080',
    'http://www.meiduo.site:8000'
)
CORS_ALLOW_CREDENTIALS = True  # 允许携带cookie

当我们，完成了以上操作后，就解决掉了浏览器的同源策略问题啦。