前端跨域jsonp解决方案

- 日理万妓 2023-06-28 06:29 119阅读 0赞

## 前端跨域解决方案 ##

看了几篇文章，得出很多种解决跨域的方法；  
这里我来用这些方法进行测试：  
跨域**解决方案**：  
1、 [通过jsonp跨域][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

[jsonp]: https://blog.csdn.net/Z_0926/article/details/103885102