CORS跨域：FLask下如何解决跨域问题？RESTful-api下如何使用CORS？

参考文章：https://zhuanlan.zhihu.com/p/75738155

什么是跨域?

要了解跨域，先要说说同源策略。同源策略是由 Netscape 公司提出的一个著名的安全策略，所有支持 JavaScript 的浏览器都会使用这个策略。所谓同源是指：域名，协议，端口相同。当页面在执行一个脚本时会检查访问的资源是否同源，如果非同源，那么在请求数据时，浏览器会在控制台中报一个异常，提示拒绝访问。
跨域，指的是从一个域名去请求另外一个域名的资源。即跨域名请求！跨域时，浏览器不能执行其他域名网站的脚本，是由浏览器的同源策略造成的，是浏览器施加的安全限制。

跨域严格一点来说就是 只要协议，域名，端口有任何一个的不同，就被当作是跨域。

什么是CORS？

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

优缺点

优点：

1. 支持POST以及所有HTTP请求
2. 安全性相对JSOP更高
3. 前端要做的事儿比较少

缺点：

1. 不兼容老版本浏览器，如IE9及其以下
2. 需要服务端支持
3. 使用起来稍微复杂了些

在Flask中使用CORS来解决跨域问题

安装flask-cors

pip install flask-cors

如果你的试图函数是以装饰器为 路由url的，则可以使用以下方法

1. 使用@cross_origin装饰器

from flask_cors import cross_origin

@app.route("/")
@cross_origin()
def helloWorld():
  return "Hello, cross-origin-world!"

2. 使用CORS函数
   应用全局配置：

from flask_cors import CORS

app = Flask(__name__)
cors = CORS(app)

@app.route("/api/v1/users")
def list_users():
  return "user example"

当然,在CORS函数中是可以进行自由参数配置的.
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接口，则不能使用上述办法

在需要支持跨域请求的API类下，添加一个类方法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',
                                     }

可能的原因:

在出现跨域问题的请求的时候,无论是POST请求还是PUT请求,前端都会优先发起一个OPTIONS请求.然后再结合前端页面的报错信息,最后得出结论.前端在处理跨域请求时,总会先发起一个OPTIONS请求确认请求允许范围.那么在解决跨域请求时,只需要在每个资源url中加入options请求方式,并返回适当的响应头信息,应该能解决跨域问题.

具体可配置参数解释:

• 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
  这个头部信息，属于请求数据的一部分。这个值表明这个请求是从浏览器打开的哪个域名下发出的。出于安全原因，浏览器不允许你修改这个值。