ajax跨域请求

一、Access-Control-Allow-Origin

一个html页面，输入两个数字，点击提交，后台返回这两个数字之和。
index.html

<html>

<head>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
</head>

<body>
    <input id='x' type='text' value="432"></input>
    <input id='y' type='text' value="234"></input>
    <button id="submit">提交</button>
    <h1 id='resp'></h1>
</body>
<script type="text/javascript">
    $('#submit').click(function(event) {
        $.get('http://localhost:5000/add', {
            x: $("#x").val(),
            y: $("#y").val()
        }, function(data) {
            console.log(data)
            $("#resp").text(data)
            console.log('get over')
        })
    });
</script>

</html>

用flask编一个服务器端程序，来回复上述html中的请求。
server.py

from flask import  Flask,request,make_response
app=Flask(__name__)
@app.route("/add")
def add():
    x,y=map(int,map(request.args.get,"xy"))
    print(add.__name__,x,y)
    resp=make_response(str(x+y))
    resp.headers['Access-Control-Allow-Origin']="*"
    return resp
if __name__ == '__main__':
    app.run(debug=True)

使用live-server作为静态服务器在index.html所在文件夹启动，默认端口为8080。
使用python server.py 启动flask程序，默认端口为5000。

关于此程序有如下知识点：

浏览器是阻止跨域请求的
这种阻止只是禁止用户查看返回结果，而不是js无法发出请求。
实际上，后台已经收到了js发出的请求，并且成功进行了回复，只是请求结果传到浏览器之后，浏览器禁止js获取返回的数据。
所以，写爬虫的时候从来没有遇到过无法获取返回数据的问题。
是否允许浏览器展示返回结果，这项权限是由后台程序控制的
如果后台程序的回复头部的Access-Control-Allow-Origin包括当前页面的域名，则浏览器将返回结果进行展示，否则不予展示。
Access-Control-Allow-Origin只允许等于一个字符串值，而不允许一个域名列表
后台程序可以获取请求程序的主机名，进而决定是否允许浏览器展示自己的返回结果。如果允许，添加Access-Control-Allow-Origin头部即可。

下面大致描述一下这些CORS(Cross Origin Resource Share,跨域资源共享)响应头的意义：

Access-Control-Allow-Origin：允许访问的客户端域名，例如：http://web.xxx.com，若为*，则表示从任意域都能访问，即不做任何限制。
Access-Control-Allow-Methods：允许访问的方法名，多个方法名用逗号分割，例如：GET,POST,PUT,DELETE,OPTIONS。
Access-Control-Allow-Credentials：是否允许请求带有验证信息，若要获取客户端域下的cookie时，需要将其设置为true。
Access-Control-Allow-Headers：允许服务端访问的客户端请求头，多个请求头用逗号分割，例如：Content-Type。
Access-Control-Expose-Headers：允许客户端访问的服务端响应头，多个响应头用逗号分割。

需要注意的是，CORS规范中定义Access-Control-Allow-Origin只允许两种取值，要么为*，要么为具体的域名，也就是说，不支持同时配置多个域名。为了解决跨多个域的问题，需要在代码中做一些处理，这里将Filter初始化参数作为一个域名的集合（用逗号分隔），只需从当前请求中获取Origin请求头，就知道是从哪个域中发出的请求，若该请求在以上允许的域名集合中，则将其放入Access-Control-Allow-Origin响应头，这样跨多个域的问题就轻松解决了。

二、jsonp

在编写html页面时，html页面的head部分通常包含很多js库，这是通过script标签引入的，例如：

<head>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
</head>

可以直接引入外部的JS，所以加载JS是没有跨域请求这一说的。
于是，我们可以在后台编写一段JS，从而控制前端DOM。
server.py

from flask import  Flask,request,make_response
app=Flask(__name__) 
@app.route("/useJsonp")
def useJsonp():
    return r"$('#resp').text('jsonp is ok')"
if __name__ == '__main__':
    app.run(debug=True)

index.html

<html>

<head>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
</head>

<body>
    <h1 id='resp'></h1>
</body>
<script type="text/javascript" src="http://localhost:5000/useJsonp">
</script>

</html>

参考资料

http://blog.csdn.net/shaobingj126/article/details/49420145
http://www.cnblogs.com/weidiao/p/5517151.html