前端跨域jsonp解决方案

前端跨域解决方案

看了几篇文章，得出很多种解决跨域的方法；
这里我来用这些方法进行测试：
跨域解决方案：
1、 通过jsonp跨域
2、 document.domain + iframe跨域
3、 location.hash + iframe
4、 window.name + iframe跨域
5、 postMessage跨域
6、 跨域资源共享（CORS）
7、 nginx代理跨域
8、 nodejs中间件代理跨域
9、 WebSocket协议跨域

1、jsonp：经常被用来同主域名下 不同二级域名下的跨域请求

function load() {
    $.ajax({
        url: 'http://*****',
        type: "POST",
        dataType: "jsonp",
        success: function(res) {
            showData(res);
        },
        error: function(msg) {
            alert("ajax连接异常" + msg)
        }
    });
}

ajax返回200，却进入error函数
这里将错误信息都一一打印：

error: function(XMLHttpResponse, textStatus, errorThrown) {
            console.log(XMLHttpResponse, textStatus, errorThrown);
        }

返回的结果：
readyState: 4
status: 200
textStatus：parsererror // parsererror，即json解析出错了
（出现这个错误是因为后端返回的数据类型和前端请求中dataType的要求类型不一致导致的。）

XMLHttpRequest.readyState: 状态码
0 － （未初始化）还没有调用send()方法
1 － （载入）已调用send()方法，正在发送请求
2 － （载入完成）send()方法执行完成，已经接收到全部响应内容
3 － （交互）正在解析响应内容
4 － （完成）响应内容解析完成，可以在客户端调用了

XMLHttpRequest.status:
200-确定。客户端请求已成功。

textStatus:字符串类型的返回状态
“timeout”（超时）
“error”（错误）
“abort”(中止)
“parsererror”（解析错误），还有可能返回空值。

errorThrown:返回的错误信息
表示服务器抛出返回的错误信息，如果产生的是HTTP错误，那么返回的信息就是HTTP状态码对应的错误信息，比如404的Not Found,500错误的Internal Server Error。

这里讲讲Ajax的dataType****选项值：
1、“xml”：返回 XML 文档，可用 jQuery 处理。
2、“html”:：返回纯文本 HTML 信息；包含的 script 标签会在插入 dom 时执行。
3、“script”:：返回纯文本JavaScript 代码。不会自动缓存结果，除非设置了 “cache” 参数。注意：在远程请求时(不在同一个域下)，所有 POST 请求都将转为 GET 请求。（因为将使用 DOM 的 script标签来加载）
4、“json”: 返回 JSON 数据 。
5、“jsonp”: JSONP 格式。使用JSONP 形式调用函数时，如 “myurl?callback=?” jQuery 将自动替换 ? 为正确的函数名，以执行回调函数，经常被用来同主域名下不同二级域名下的跨域请求。
6、“text”: 返回纯文本字符串。

这里需要将前端请求的数据格式和后端返回的数据格式要一致；

jsonp的缺陷：只能GET不能POST