09. ajax跨域问题,同源策略

时间 2019-11-17

标签 ajax 问题同源策略栏目 Ajax 繁體版

原文原文链接

有三个标签容许跨域加载资源

能够作防盗链图片功能

前端使用jsonp实现原理

后端设置http header

手动编写一个ajax

var xhr= new XMLHttpRequest()
xhr.open('GET','/api',false)
xhr.onreadystatechange=function(){
    //这里的函数异步执行,可参考以前js基础中的异步模块
    if(xhr.readyState==4){
        if(xhr.status==200){
            alert(xhr.responseText)
        }
    }
}
xhr.send(null)

若是同页面，使用iframe的跨域问题,

cross-origin

服务端增长

response.addHeader("Access-Control-Allow-Origin", "http://write.blog.csdn.net");

后端处理能够写cors

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="box"></div>
<script type="text/javascript">
    // 面试题：什么是跨域？解决跨域的办法有哪些？
    /*
      1.同源策略
       - 浏览器安全策略
       - 协议名、域名、端口号必须彻底一致
       
      2.跨域
       -违背同源策略就会产生跨域
       
      3.解决跨域
       jsonp、cors、服务代理...
       (前端)     （后端）

    */
    //建立script标签
    var script=document.createElement('script');

    //设置回调函数
    function getDate(data){
        console.log(data);
    }

    //设置script 的src属性，设置请求地址

    script.src='http://localhost:3000?callback=getDate';
    
    //让script生效
    document.body.appendChild(script);
</script>
</body>
</html>

ajax的传输方式

若是要处理 $.ajax() 获得的数据，则须要使用回调函数：beforeSend、error、dataFilter、success、complete

跨域问题，Ajax返回值有哪几个

1xx 信息提示

2xx成功

3xx重定向

200,请求成功

206,请求内容局部成功

4xx客户端

404未找到

400,客户端请求语法错误,通常是链接地址不对.

5xx服务端

500,服务器出现异常.宕机.

jQuery中ajax的4种经常使用请求方式： 1.$.ajax()返回其建立的 XMLHttpRequest 对象。

2.经过远程 HTTP GET 请求载入信息。

3. 经过远程 HTTP POST 请求载入信息。

4.经过 HTTP GET 请求载入 JSON 数据。

2. 请求方式：

一共有8种请求方式,经常使用的请求方法有OPTIONS、GET、HEAD、POST、PUT、DELETE、TRACE、CONNECT