浏览器的同源策略及CORS跨域解决方案 DRF

时间 2019-11-24

原文原文链接

一个源的定义

若是两个页面的协议，端口（若是有指定）和域名都相同，则两个页面具备相同的源。html

举个例子：git

下表给出了相对http://a.xyz.com/dir/page.html同源检测的示例: github

URL	结果	缘由
`http://a.xyz.com/dir2/other.html`	成功
`http://a.xyz.com/dir/inner/another.html`	成功
`https://a.xyz.com/secure.html`	失败	不一样协议 ( https和http )
`http://a.xyz.com:81/dir/etc.html`	失败	不一样端口 ( 81和80)
`http://a.opq.com/dir/other.html`	失败	不一样域名 ( xyz和opq)

同源策略

同源策略是浏览器的一个安全功能，不一样源的客户端脚本在没有明确受权的状况下，不能读写对方资源。因此xyz.com下的js脚本采用ajax读取abc.com里面的文件数据是会被拒绝的。ajax

同源策略限制了从同一个源加载的文档或脚本如何与来自另外一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。django

不受同源策略限制的

1. 页面中的连接，重定向以及表单提交是不会受到同源策略限制的。后端

2. 跨域资源的引入是能够的。可是js不能读写加载的内容。如嵌入到页面中的<script src="..."></script>，<img>，<link>，<iframe>等。跨域

CORS解决跨域问题

CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。它容许浏览器向跨源服务器发出XMLHttpRequest请求，从而解决AJAX只能同源使用的限制。浏览器

CORS简介

CORS须要浏览器和服务器同时支持。目前基本上主流的浏览器都支持CORS。因此只要后端服务支持CORS，就可以实现跨域。安全

简单请求和非简单请求介绍

浏览器将CORS请求分红两类：简单请求（simple request）和非简单请求（not-so-simple request）。bash

一个请求须要同时知足如下两大条件才属于简单请求。

1) 请求方法是如下三种方法之一：
　　　　HEAD
　　　　GET
　　　　POST

（2）HTTP的头信息不超出如下几种字段：
　　　　Accept
　　　　Accept-Language
　　　　Content-Language
　　　　Last-Event-ID
　　　　Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain

使用django-cors-headers解决目前的CORS跨域问题

咱们只须要安装这个包，而后按须要配置一下就能够了。

安装

pip install django-cors-headers

注册APP

INSTALLED_APPS = [

    ...
    'app01.apps.App01Config',
    'corsheaders',  # 将 corsheaders 这个APP注册
]

添加中间件

必须放在最前面，由于要先解决跨域的问题。只有容许跨域请求，后续的中间件才会正常执行。

MIDDLEWARE = [
'corsheaders.middleware.CorsMiddleware', # 添加中间件
'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',
]

配置

你能够选择不限制跨域访问

CORS_ORIGIN_ALLOW_ALL = True

或者你能够选择设置容许访问的白名单

CORS_ORIGIN_ALLOW_ALL = False

CORS_ORIGIN_WHITELIST = (
    # '<YOUR_DOMAIN>[:PORT]',
    '127.0.0.1:8080'
)

更多详细配置详细请查看django-cors-headers项目