一、什么是跨域
跨域是指：浏览器A从服务器B获取的静态资源，包括Html、Css、Js，然后在Js中通过Ajax访问C服务器的静态资源或请求。即：浏览器A从B服务器拿的资源，资源中想访问服务器C的资源。
同源策略是指：浏览器A从服务器B获取的静态资源，包括Html、Css、Js，为了用户安全，浏览器加了限制，其中的Js通过Ajax只能访问B服务器的静态资源或请求。即：浏览器A从哪拿的资源，那资源中就只能访问哪。
同源是指：同一个请求协议(如：Http或Https)、同一个Ip、同一个端口，3个全部相同，即为同源。
跨域的处理
W3C组织制定了一个Cross-Origin Resource Sharing规范，简写为Cors，现在这个规范已经被大多数浏览器支持，Cors 专门用来处理跨域的需求。
Cors需要在后端应用进行配置，因此，是一种跨域的后端处理方式，这么做也容易理解，一个你不认识的源来访问你的应用，自然需要应用进行授权。除了后端处理方式，也有前端的解决方案，如：JSONP，这里我们主要讲解Flask后端配置方案.
跨域的分类
跨域分为以下3种
| 名称 | 英文名 | 说明 |
|---|---|---|
| 简单请求 | Simple Request | 发起的Http请求符合： 1.无自定义请求头，只有Accept、Accept-Language、Content-Language、Last-Event-ID 2.请求动词为GET、HEAD或POST之一 3.动词为POST时，Content-Type是application/x-www-form-urlencoded，multipart/form-data或text/plain之一 |
| 复杂请求 | Preflighted Request | 发起的Http请求符合其中之一： 1.包含了自定义请求头 2.请求动词不是GET、HEAD或POST 3.动词是POST时， Content-Type不是application/x-www-form-urlencoded，multipart/form-data或text/plain。 即：简单请求的相反 |
| 凭证请求 | Requests with Credential | 发起的Http请求中带有凭证 |
简单请求
简单请求的发送从代码上来看和普通的XHR没太大区别，但是HTTP头当中要求总是包含一个域（Origin）的信息。该域包含协议名、地址以及一个可选的端口。不过这一项实际上由浏览器代为发送，并不是开发者代码可以触及到的。
简单请求的部分响应头如下：
- Access-Control-Allow-Origin（必含）。不填，请求按失败处理。该项控制数据的可见范围，如果希望数据对任何人都可见，可以填写"*"。
- Access-Control-Allow-Credentials（可选）。该项标志着请求当中是否包含cookies信息，只有一个可选值：true（必为小写）。如果不包含cookies，请略去该项，而不是填写false。这一项与XmlHttpRequest2对象当中的withCredentials属性应保持一致，即withCredentials为true时该项也为true；withCredentials为false时，省略该项不写。反之则导致请求失败。
- Access-Control-Expose-Headers（可选） – 该项确定XmlHttpRequest2对象当中getResponseHeader()方法所能获得的额外信息。通常情况下，getResponseHeader()方法只能获得如下的信息：（当你需要访问额外的信息时，就需要在这一项当中填写并以逗号进行分隔）
- Cache-Control
- Content-Language
- Content-Type
- Expires
- Last-Modified
- Pragma
如果仅仅是简单请求，那么即便不用CORS也没有什么大不了，但CORS的复杂请求就令CORS显得更加有用了。简单来说，任何不满足上述简单请求要求的请求，都属于复杂请求。比如说你需要发送PUT、DELETE等HTTP动作，或者发送Content-Type: application/json的内容。
复杂请求
复杂请求先发送一种"预请求"，此时作为服务端，也需要返回"预回应"作为响应。预请求实际上是对服务端的一种权限请求，只有当预请求成功返回，实际请求才开始执行。预请求以OPTIONS形式发送，当中同样包含域，并且还包含了两项CORS特有的内容：
- Access-Control-Request-Method – 该项内容是实际请求的种类，可以是GET、POST之类的简单请求，也可以是PUT、DELETE等等。
- Access-Control-Request-Headers – 该项是一个以逗号分隔的列表，当中是复杂请求所使用的头部。
显而易见，这个预请求实际上就是在为之后的实际请求发送一个权限请求，在预回应返回的内容当中，服务端应当对这两项进行回复，以让浏览器确定请求是否能够成功完成。复杂请求的部分响应头及解释如下：
- Access-Control-Allow-Origin（必含） – 和简单请求一样的，必须包含一个域。
- Access-Control-Allow-Methods（必含） – 这是对预请求当中Access-Control-Request-Method的回复，这一回复将是一个以逗号分隔的列表。尽管客户端或许只请求某一方法，但服务端仍然可以返回所有允许的方法，以便客户端将其缓存。
- Access-Control-Allow-Headers（当预请求中包含Access-Control-Request-Headers时必须包含） – 这是对预请求当中Access-Control-Request-Headers的回复，和上面一样是以逗号分隔的列表，可以返回所有支持的头部。这里在实际使用中有遇到，所有支持的头部一时可能不能完全写出来，而又不想在这一层做过多的判断，没关系，事实上通过request的header可以直接取到Access-Control-Request-Headers，直接把对应的value设置到Access-Control-Allow-Headers即可。
- Access-Control-Allow-Credentials（可选） – 和简单请求当中作用相同。
- Access-Control-Max-Age（可选） – 以秒为单位的缓存时间。预请求的的发送并非免费午餐，允许时应当尽可能缓存。
一旦预回应如期而至，所请求的权限也都已满足，则实际请求开始发送。
目前大部分Modern浏览器已经支持完整的CORS，但IE直到IE11才完美支持，所以对于PC网站，还是建议采用其他解决方案，如果仅仅是移动端网站，大可放心使用。
Flask配置跨域
flask 配置cors 有两种方式，一种使用自带的cors，一种自定义返回头
第一种，自定义返回头
@app.after_request
def af_request(resp): """#请求钩子，在所有的请求发生后执行，加入headers。:param resp::return:"""resp = make_response(resp)resp.headers['Access-Control-Allow-Origin'] = '*'resp.headers['Access-Control-Allow-Methods'] = 'GET,POST'resp.headers['Access-Control-Allow-Headers'] = 'x-requested-with,content-type'return resp第二种，使用cors
Flask配Cors跨域，使用Flask-CORS包，详细文档，参见: https://flask-cors.readthedocs.io/en/latest/
flask-cors 也提供了两种方式：
| 方式 | 范围 | 说明 |
|---|---|---|
| @cross_origin装饰器 | 配置单个路由 | 适用于配置特定的API接口 |
| CORS函数 | 配置全局API接口 | 适用于全局的API接口配置 |
安装flask-cors
pip install flask-cors
第一种：使用@cross_origin装饰器
@app.route("/")
@cross_origin()
def helloWorld():return "Hello, cross-origin-world!"
CORS参数说明
| 装饰器参数 | 类型 | Head字段 | 说明 |
|---|---|---|---|
| origins | 列表、字符串或正则表达式 | Access-Control-Allow-Origin | 配置允许跨域访问的源， |
| methods | 列表、字符串 | Access-Control-Allow-Methods | 配置跨域支持的请求方式，如：GET、POST |
| expose_headers | 列表、字符串 | Access-Control-Expose-Headers | 自定义请求响应的Head信息 |
| allow_headers | 列表、字符串或正则表达式 | Access-Control-Request-Headers | 配置允许跨域的请求头 |
| supports_credentials | 布尔值 | Access-Control-Allow-Credentials | 是否允许请求发送cookie，false是不允许 |
| max_age | 整数、字符串 | Access-Control-Max-Age | 预检请求的有效时长 |
第二种：使用CORS函数
#################### 应用全局配置 ####################
from flask_cors import *app = Flask(__name__)
CORS(app, supports_credentials=True, resources=r"/*")@app.route("/api/v1/users")
def list_users():return "user example"#################### 单独Blueprints配置 ####################
api_v1 = Blueprint('API_v1', __name__)
CORS(api_v1) @api_v1.route("/api/v1/users/")
def list_users():return "user example"
CORS参数说明
| 参数 | 类型 | Head字段 | 说明 |
|---|---|---|---|
| resources | 字典、迭代器或字符串 | 无 | 全局配置允许跨域的API接口 |
| origins | 列表、字符串或正则表达式 | Access-Control-Allow-Origin | 配置允许跨域访问的源， |
| methods | 列表、字符串 | Access-Control-Allow-Methods | 配置跨域支持的请求方式，如：GET、POST |
| expose_headers | 列表、字符串 | Access-Control-Expose-Headers | 自定义请求响应的Head信息 |
| allow_headers | 列表、字符串或正则表达式 | Access-Control-Request-Headers | 配置允许跨域的请求头 |
| supports_credentials | 布尔值 | Access-Control-Allow-Credentials | 是否允许请求发送cookie，false是不允许 |
| max_age | 整数、字符串 | Access-Control-Max-Age | 预检请求的有效时长 |
注意：继承Resource类来写的RESTful-API接口
继承Resource类来写的RESTful-API接口不能使用上述办法。解决办法是在需要支持跨域请求的API类下，添加一个类方法options，就可以解决跨域问题
原因是跨域问题请求的时候,无论是POST请求还是PUT请求,前端都会优先发起一个OPTIONS请求确认请求允许范围.那么在解决跨域请求时,只需要在每个资源url中加入options请求方式,并返回适当的响应头信息就能解决跨域问题.
class YourAPI(Resource):def options(self):return {'Allow': '*'}, 200, {'Access-Control-Allow-Origin': '*','Access-Control-Allow-Methods': 'HEAD, OPTIONS, GET, POST, DELETE, PUT','Access-Control-Allow-Headers': 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild',}具体可配置参数解释:
-
Access-Control-Allow-Origin
这个头部信息由服务器返回，用来明确指定那些客户端的域名允许访问这个资源。它的值可以是：-使用" * " —— 允许任意域名
- 一个完整的域名名字（比如：https://example.com）
如果你需要客户端传递验证信息到头部（比如：cookies）。这个值不能为 * —— 必须为完整的域名（这点很重要）。
-
Access-Control-Allow-Credentials
这个头部信息只会在服务器支持通过cookies传递验证信息的返回数据里。它的值只有一个就是 true。跨站点带验证信息时，服务器必须要争取设置这个值，服务器才能获取到用户的cookie。 -
Access-Control-Allow-Headers
提供一个逗号分隔的列表表示服务器支持的请求数据类型。假如你使用自定义头部(比如：x-authentication-token 服务器需要在返回OPTIONS请求时，要把这个值放到这个头部里，否则请求会被阻止)。 -
Access-Control-Expose-Headers
相似的，这个返回信息里包含了一组头部信息，这些信息表示那些客户端可以使用。其他没有在里面的头部信息将会被限制（译者注：这个头信息实战中使用较少）。 -
Access-Control-Allow-Methods
一个逗号分隔的列表，表明服务器支持的请求类型（比如：GET, POST） -
Origin
这个头部信息，属于请求数据的一部分。这个值表明这个请求是从浏览器打开的哪个域名下发出的。出于安全原因，浏览器不允许你修改这个值。
)
