跨域CORS及本地域名的配置

一.同源的概念

何为同源？只有当协议、端口、和域名都相同的页面，则两个页面具有相同的源。只要网站的 协议名protocol、 主机host、 端口号port 这三个中的任意一个不同，网站间的数据请求与传输便构成了跨域调用，会受到同源策略的限制。 
​ 同源策略限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的关键的安全机制。浏览器的同源策略，出于防范跨站脚本的攻击，禁止客户端脚本（如 JavaScript）对不同域的服务进行跨站调用（通常指使用XMLHttpRequest请求）。

只有当浏览器发送ajax请求时，才会遇到跨域请求的问题，src是可以正常访问的

有八种方式可以实现跨域请求：

详情见博客：https://blog.csdn.net/ligang2585116/article/details/73072868

这里只简单介绍一种方式解决跨域请求：CORS

为什么会出现跨域请求？

由于使用DRF开发，前端和后端分离的应用模式开发，由于前端资源和后端开发的端口不同，所以会存在跨域请求

Flask不会出现是因为Flask是前后端不分离的应用模式开发

二.模拟为前端和后端设置域名配置

位置	域名
前端	www.baidu.site
后端	api.baidu.site

编辑/etc/hosts文件，可以设置本地域名

sudo vim /etc/hosts

在文件中添加

127.0.0.1  api.baidu.site

127.0.0.1 www.baidu.site

在前端目录中，创建host.js文件为前端保存后端域名

var host = 'http://api.baidu.site:8000'

在需要访问后端接口的前端页面中中引入host.js

<script type="text/javascript" src="js/host.js"></script>

在js文件(访问后端接口的js)中使用host变量指代后端域名

data：{host，...}

三.CORS配置

安装：pip install django-cors-headers

在setting.py中设置

添加应用：

INSTALLED_APPS=（'corsheaders',...）

中间层设置

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

这里需要注意：这个设置必须在最上面，因为DRF的request的解析顺序是从上到下的，先要解决跨域问题才能往下走

添加白名单

CORS_ORIGIN_WHITELIST = (
    '127.0.0.1:8080',
    'localhost:8080',
    'www.baidu.site:8080'
)
CORS_ALLOW_CREDENTIALS = True  # 允许携带cookie

这里的localhost指的也是127.0.0.1，不是本机IP

设置allowed_hosts

这里是基于安全角度考虑的，只允许这些主机访问

#允许哪些主机访问
ALLOWED_HOSTS = ['127.0.0.1','api.baidu.site']

完成跨域设置之后，就可以继续happy的往下撸代码了...