0%

Ajax 跨域问题解决方案

由于浏览器安全方面的限制,大多数Ajax请求遵守“同源策略”,也就是说无法从不同的域、子域或协议中获取数据。本文主要通过CORS解决Ajax跨域请求的问题。
文中关于CORS的定义主要参考廖雪峰–跨域资源共享 CORS 详解,本文使用$.ajax以及flask实现CORS的处理。

原生CORS方式解决:

CORS需要浏览器和服务器同时支持。目前,所有浏览器都支持该功能,IE浏览器不能低于IE10。

整个CORS通信过程,都是浏览器自动完成,不需要用户参与。对于开发者来说,CORS通信与同源的AJAX通信没有差别,代码完全一样。浏览器一旦发现AJAX请求跨源,就会自动添加一些附加的头信息,有时还会多出一次附加的请求,但用户不会有感觉。因此,实现CORS通信的关键是服务器。只要服务器实现了CORS接口,就可以跨源通信。

浏览器将CORS请求分成两类:简单请求(simple request)和非简单请求(not-so-simple request)。

简单请求

处理简单的请求的时候,Ajax发送的跨域请求头中会多提供一个Origin字段,用来说明,本次请求来自哪个源(协议+域名+端口)。服务器根据这个值,决定是否同意这次请求。

此时只要在服务端获取Origin字段判断后是否同意,如果同意跨域,则在返回的响应中添加Access-Control-Allow-Origin字段,值为允许接受的请求的域名,可以使用具体域名,或者"*"表示允许所有的请求。

flask服务端处理:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
from flask import Flask, make_response, jsonify, request

app = Flask(__name__)
app.config["JSON_AS_ASCII"] = False
# 用于设置jsonify返回的json数据支持中文
# json.dumps()解决同样的问题可以加入ensure_ascii=False

@app.route('/index')
def index():
data = [{"name":"小杰", "sex":"男", "age": 24}]
origin = request.headers.get("Origin", None)
response = jsonify(data)
if origin == "http://localhost:8080":
response = make_response(response)
response.headers['Access-Control-Allow-Origin'] = '*' # 处理简单请求的设置
return response

响应头除了必须含有Access-Control-Allow-Origin字段之外,还包括两个可选字段:

  • Access-Control-Expose-Headers: (可选)
    CORS请求时,XMLHttpRequest对象的getResponseHeader()方法只能拿到6个基本字段:Cache-ControlContent-LanguageContent-TypeExpiresLast-ModifiedPragma。如果想拿到其他字段,就必须在Access-Control-Expose-Headers里面指定。

  • Access-Control-Allow-Credentials: (可选)
    它的值是一个布尔值,表示是否允许发送Cookie。默认情况下,Cookie不包括在CORS请求之中。设为true,即表示服务器明确许可,Cookie可以包含在请求中,一起发给服务器。这个值也只能设为true,如果服务器不要浏览器发送Cookie,删除该字段即可。

    只是在服务端设置允许还是不够的,此时还需要对请求进行设置:

    1
    2
    var xhr = new XMLHttpRequest();
    xhr.withCredentials = true;

    JQuery中ajax的设置如下:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    $.ajax({
    url: "http://localhost:8080",
    type: "GET",
    xhrFields: {
    withCredentials: true
    },
    crossDomain: true,
    success: function (data) {
    ...
    }
    });

    xhrFields以及crossDomain是必须要设置的。

    需要注意的是,如果要发送Cookie,Access-Control-Allow-Origin 就不能设为星号,必须指定明确的、与请求网页一致的域名。同时,Cookie依然遵循同源政策,只有用服务器域名设置的Cookie才会上传,其他域名的Cookie并不会上传,且(跨源)原网页代码中的document.cookie也无法读取服务器域名下的Cookie。(就是跨源能上传的Cookie,也只是服务器同域名的Cookie)

非简单请求

非简单请求是那种对服务器有特殊要求的请求,比如请求方法是PUTDELETE,或者Content-Type字段的类型是application/json

非简单请求的CORS请求,会在正式通信之前,会自动增加一次HTTP查询请求,称为"预检"请求(preflight),在chrome浏览器的network中,该条请求的Type为preflight,请求类型是OPTIONS,包含的关键字除了Origin字段(该字段在简单和非简单请求中都会使用到)之外还有:

  • Access-Control-Request-Method: (必须)
    ​ 浏览器CORS请求使用到的请求方法

  • Access-Control-Request-Headers: (可选)
    ​ 该字段是一个逗号分隔的字符串,指定浏览器CORS请求会额外发送的头信息字段。
    ​ 在前端,通过对XMLHttpRequest对象采用如下方式进行设置:

    1
    xhr.setRequestHeader("X-Custom-Header", "value")
预检的响应,服务器返回的响应头部需要包含:
  • Access-Control-Allow-Origin: (必须)
    设置允许跨域的源,设置为*表示允许任意的源。

  • Access-Control-Allow-Methods:(必须)
    必须字段,值为逗号分隔的一个字符串,表明服务器支持的所有跨域请求的方法。注意,返回的是所有支持的方法,而不单是浏览器请求的那个方法。这是为了避免多次"预检"请求。

  • Access-Control-Allow-Credentials: (可选)
    为布尔值,和跨域简单请求的一样,表示是否允许发送Cookie。

  • Access-Control-Allow-Headers:(根据请求设置)
    如果浏览器请求包括Access-Control-Request-Headers字段,则Access-Control-Allow-Headers字段是必需的。它也是一个逗号分隔的字符串,表明服务器支持的所有头信息字段,不限于浏览器在"预检"中请求的字段。

  • Access-Control-Max-Age:(可选,不要轻易设置)
    该字段可选,用来指定本次预检请求的有效期,单位为秒。上面结果中,有效期是20天(1728000秒),即允许缓存该条回应1728000秒(即20天),在此期间,不用发出另一条预检请求。

注意:一旦服务器通过了"预检"请求,以后每次浏览器正常的CORS请求,就都跟简单请求一样,会有一个Origin头信息字段。服务器的回应,也都会有一个Access-Control-Allow-Origin头信息字段(该字段在响应头中每次都会包含,这是简单请求响应的要求)。

实现

前端ajax请求:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$.ajax({
url: "http://127.0.0.1:5000/index",
type: "put",
dataType: "json",
beforeSend: function(xhr, data) {
console.log(data)
console.log(xhr) // 为XMLHttpRequest对象
xhr.setRequestHeader("X-Custom-Header", "value");
},
success: function(data, status, xhr){
var str = "";
$.each(data, function(index, info){
str += "姓名:" + info["name"] + "<br/>";
str += "性别:" + info["sex"] + "<br/>";
str += "年龄:" + info["age"] + "<br/>";
str += "<hr/>";
});
$("div").html(str); // .html(字符串) 用于对字符串不进行转义,会显示网页效果
}
})

flask代码实现:

注意:预检会单独发送一次请求,也就是说,一次跨域请求实际上会发生两次请求,第一次是预检,第二次是正常的请求。

只有第一次预检的时候(发送的是一个OPTIONS请求),请求中包含有Origin: http://127.0.0.1:8080Access-Control-Request-Headers以及 Access-Control-Request-Method,此时返回的响应需要设置Access-Control-Allow-OriginAccess-Control-Allow-MethodsAccess-Control-Allow-Headers(这一项只有在请求中设置了Access-Control-Request-Headers的时候才需要)。

在预检通过之后,紧接着会再次向相同的url发送原始的请求,请求中只会发送Origin: http://127.0.0.1:8080, 需要返回的响应头中包含Access-Control-Allow-Origin字段。

可以使用app.before_request请求钩子完成非简单请求的预检过程,实现如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
from flask import Flask, make_response, jsonify, request

app = Flask(__name__)
app.config["JSON_AS_ASCII"] = False

# 通过before_request处理预检过程
@app.before_request
def handle_cors():
if request.method != "OPTIONS":
return None

access_control_request_method = request.headers.get('Access-Control-Request-Method', None)
access_control_request_headers = request.headers.get("Access-Control-Request-Headers", None)

if access_control_request_method:
response = make_response('') # 预检可以发送任何东西
response.headers['Access-Control-Allow-Origin'] = '*' # 处理简单请求的设置
response.headers['Access-Control-Allow-Methods'] = "DELETE, PUT" # 注意是methods
response.headers['Access-Control-Allow-Headers'] = access_control_request_headers
# response.headers['Access-Control-Max-Age'] = 1728000
# response.headers['Access-Control-Allow-Credentials'] = "true" # 注意使用的是js中true
return response

@app.route('/index', methods=['POST', 'GET', 'DELETE', 'PUT', 'OPTIONS'])
# 注意,该视图函数需要设置预检以及cors请求的类型,否则无法处理delete以及options请求。
def index():
data = [{"name":"小杰", "sex":"男", "age": 24}]
origin = request.headers.get("Origin", None)
response = jsonify(data)
if origin == "http://127.0.0.1:8080":
response = make_response(response)
response.headers['Access-Control-Allow-Origin'] = '*' # 处理简单请求的设置
# response.headers['Access-Control-Allow-Credentials'] = "true" # 注意使用的是js中true
return response

除此以外,还提供了flask还提供了第三方插件,如Flask-CORS插件来完成跨域请求问题。