跨域问题的解决方案

跨域（Cross Domain）

什么是跨域

先来说下 同源策略
同源：在多个地址中，相同协议，相同域名，相同端口 被视为 "同源"
在 HTTP 中，必须是同源地址才能互相发送请求，非同源的请求会被拒绝(<script>和<img>除外)
例如：
http://www.baidu.com/a.html 和 http://www.baidu.com/page/b.html 就是同源地址
http://localhost:5000/a.html 和 http://127.0.0.1/server是 非同源，域名不同

跨域：非同源的网页，相互发送请求的操作就是跨域操作

解决方案

一 通过 <script> 向服务器发送请求
由服务器资源指定前端页面的哪个方法来执行响应的数据

实现步骤
1.前端中想实现跨域操作时，动态创建 script 标记
var sciprt = document.createElement("script")
2.为 script 元素设置相应属性
设置 type 的值为 text/javascript
设置 src 的值为 请求地址
3.发送请求
将创建好的 script 元素追加到网页中即可

var body = document.getElementsByTagName("body")[0]
body.append(script)

4.在前端，创建处理数据的响应方法

function process(data){
    ...
}

5.在服务器端，响应数据
特点：指定调用前端的哪个处理方法

def xxx():
    return "process('xxx')"

jquery 的跨域

jsop: json with padding
方案一

$.ajax({
    url: 'xxx',
    type: 'get/post',
    dataType: 'jsonp', // 指定为跨域访问
    success.function(data){
        // 响应成功后的处理
    } 
})

方案二

$.ajax({
    url: 'xxx',
    type: 'get/post',
    dataType: 'jsonp', // 指定为跨域访问
    jsonp: 'huidiao', // 定义 callback 的参数名
    jsonpCallback: 'xx', // 定义jsonp的回调函数名，xx函数需要在外面自己定义
})