CORS跨域资源共享实现前后端分离

2019-07-09 20:39:37 阅读：245 来源： 互联网

标签：资源共享 Control 请求 GET Access CORS 服务器跨域

在这里插入图片描述

示例

在这里插入图片描述

CORS 跨域资源共享

django-cors-header 实现CORS跨域的插件

1，什么是CORS

允许浏览器向跨源(协议 + 域名 + 端口)服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制

2，特点

1，浏览器自动完成（在请求头中加入特殊头或发送特殊请求）

2，服务器需要支持（响应头中需要有特殊头）

3，简单请求(Simple requests)和预检请求(Preflighted requests)

满足以下全部条件的请求为 简单请求

1，请求方法如下：

GET or HEAD or POST

2，请求头仅包含如下：

Accept-Language

Content-Language

Content-Type

3，Content-Type 仅支持如下三种：

application/x-www-form-urlencoded

multipart/form-data

text/plain

不满足以上任意一点的请求都是预检请求

4，简单请求发送流程

1，请求

请求头中携带 Origin，该字段表明自己来自哪个域

2，响应

如果请求头中的Origin在服务器接受范围内，则返回如下头

响应头	作用	备注
Access-Control-Allow-Origin	服务器接受得域
Access-Control-Allow-Credentials	是否接受Cooike	可选
Access-Control-Expose-Headers	默认情况下，xhr只能拿到如下响应头：Cache-Control，Content-Language，Content-Type，Expires，Last-Modified；如果有需要获取其他头，需在此指定	可选

如果服务器不接受此域，则响应头中不包含 Access-Control-Allow-Origin

5，预检请求发送流程

1，OPTION 请求发起，携带如下请求头

请求头	作用	备注
Origin	表明此请求来自哪个域	必选
Access-Control-Request-Method	此次请求使用方法	必选
Access-Control-Request-Headers	此次请求使用的头	必选

2，OPTION 接受响应阶段，携带如下响应头

响应头	作用	备注
Access-Control-Allow-Origin	同简单请求	必选
Access-Control-Allow-Methods	告诉浏览器，服务器接受得跨域请求方法	必选
Access-Control-Allow-Headers	返回所有支持的头部，当request有 ‘Access-Control-Request-Headers’时，该响应头必然回复	必选
Access-Control-Allow-Credentials	同简单请求	可选
Access-Control-Max-Age	OPTION请求缓存时间，单位s	可选

3，主请求阶段

请求头	作用	备注
Origin	表明此请求来自哪个域

4，主请求响应阶段

响应头	作用	备注
Access-Control-Allow-Origin	当前服务器接受得域

6，Django支持

django-cors-headers官网 https://pypi.org/project/django-cors-headers/
目前只支持django 2.0以下

直接pip安装将把django升级到2.0以上，强烈建议用离线安装方式

配置流程

		1，INSTALLED_APPS 中添加 corsheaders
		2，MIDDLEWARE 中添加 corsheaders.middleware.CorsMiddleware
		   位置尽量靠前，官方建议 ‘django.middleware.common.CommonMiddleware’ 上方
		3，CORS_ORIGIN_ALLOW_ALL  布尔值  如果为True 白名单不启用
		# 白名单 和3 互斥
		4，CORS_ORIGIN_WHITELIST =[
			"https://example.com"
		]
		5, CORS_ALLOW_METHODS = (
				'DELETE',
				'GET',
				'OPTIONS',
				'PATCH',
				'POST',
				'PUT',
				)
		6, CORS_ALLOW_HEADERS = (
				'accept-encoding',
				'authorization',
				'content-type',
				'dnt',
				'origin',
				'user-agent',
				'x-csrftoken',
				'x-requested-with',
			)
		7, CORS_PREFLIGHT_MAX_AGE  默认 86400s
		8, CORS_EXPOSE_HEADERS  []
		9, CORS_ALLOW_CREDENTIALS  布尔值， 默认False

4，RESTful -Representational State Transfer

4.1，什么时RESTful

1，资源 （Resources）

网络上的一个实体，或者说是网络上的一个具体信息，并且每个资源都有一个独一无二得URI与之对应；获取资源-直接访问URI即可

2，表现层（Representation）

如何去表现资源 - 即资源得表现形式；如HTML , xml , JPG , json等

3，状态转化（State Transfer）

访问一个URI即发生了一次客户端和服务端得交互；此次交互将会涉及到数据和状态得变化

客户端需要通过某些方式触发具体得变化 - HTTP method 如 GET， POST，PUT，PATCH，DELETE 等

4.2 RESTful的特征

1，每一个URI代表一种资源

2，客户端和服务器端之前传递着资源的某种表现

3，客户端通过HTTP的几个动作对资源进行操作 - 发生‘状态转化’

4.3 如何设计符合RESTful 特征的API

1，协议 - http/https

2，域名：

域名中体现出api字样，如

https://api.example.com

https://example.org/api/

3, 版本:

https://api.example.com/v1/

4，路径 -

路径中避免使用动词，资源用名词表示，案例如下

https://api.example.com/v1/users
https://api.example.com/v1/animals

5，HTTP动词语义

GET（SELECT）：从服务器取出资源（一项或多项）。
POST（CREATE）：在服务器新建一个资源。
PUT（UPDATE）：在服务器更新资源（客户端提供改变后的完整资源）。
PATCH（UPDATE）：在服务器更新资源（客户端提供改变的属性）。

DELETE（DELETE）：从服务器删除资源。

具体案例如下：

GET /zoos：列出所有动物园
POST /zoos：新建一个动物园
GET /zoos/ID：获取某个指定动物园的信息
PUT /zoos/ID：更新某个指定动物园的信息（提供该动物园的全部信息）
PATCH /zoos/ID：更新某个指定动物园的信息（提供该动物园的部分信息）
DELETE /zoos/ID：删除某个动物园
GET /zoos/ID/animals：列出某个指定动物园的所有动物
DELETE /zoos/ID/animals/ID：删除某个指定动物园的指定动物

6，巧用查询字符串

?limit=10：指定返回记录的数量
?offset=10：指定返回记录的开始位置。
?page=2&per_page=100：指定第几页，以及每页的记录数。
?sortby=name&order=asc：指定返回结果按照哪个属性排序，以及排序顺序。
?type_id=1：指定筛选条件

7，状态码

1，用HTTP响应码表达此次请求结果，例如

200 OK - [GET]：服务器成功返回用户请求的数据
201 CREATED - [POST/PUT/PATCH]：用户新建或修改数据成功。
202 Accepted - [*]：表示一个请求已经进入后台排队（异步任务）
204 NO CONTENT - [DELETE]：用户删除数据成功。
400 INVALID REQUEST - [POST/PUT/PATCH]：用户发出的请求有错误，服务器没有进行新建或修改数据的操作，该操作是幂等的。
401 Unauthorized - [*]：表示用户没有权限（令牌、用户名、密码错误）。
403 Forbidden - [*] 表示用户得到授权（与401错误相对），但是访问是被禁止的。
404 NOT FOUND - [*]：用户发出的请求针对的是不存在的记录，服务器没有进行操作，该操作是幂等的。
406 Not Acceptable - [GET]：用户请求的格式不可得（比如用户请求JSON格式，但是只有XML格式）。
410 Gone -[GET]：用户请求的资源被永久删除，且不会再得到的。
422 Unprocesable entity - [POST/PUT/PATCH] 当创建一个对象时，发生一个验证错误。
500 INTERNAL SERVER ERROR - [*]：服务器发生错误

2, 自定义内部code 进行响应

如返回结构如下 {‘code’:200, ‘data’: {}, ‘error’: xxx}

8，返回结果

根据HTTP 动作的不同，返回结果的结构也有所不同

GET /users：返回资源对象的列表（数组）
GET /users/guoxiaonao：返回单个资源对象
POST /users：返回新生成的资源对象
PUT /users/guoxiaonao：返回完整的资源对象
PATCH /users/guoxiaonao：返回完整的资源对象
DELETE /users/guoxiaonao：返回一个空文档

1,URL出现的所有词 尽量避免使用动词，尽可能使用名词
2，HTTP对应的method去触发url代表的资源状态

标签：资源共享,Control,请求,GET,Access,CORS,服务器,跨域
来源： https://blog.csdn.net/weixin_45086881/article/details/95164794

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

CORS跨域资源共享 实现前后端分离