Ajax跨域请求 2021.11.24

跨域：当一个资源从与该资源本身所在的服务器不同的域、协议或端口请求一个资源时，此时就被称为“跨域请求”，而浏览器的“同源策略”此时将阻止了Ajax的跨域访问。

ajax同源策略的限制，会跨域拦截，解决方案：

1.服务端接口设置允许访问的cors头(cross origin resource share)，CORS跨域资源共享(Cross Origin Resource Sharing) 是一种机制，它使用额外的 HTTP 头来告诉浏览器让运行在一个 origin (domain) 上的Web应用被准许访问来自不同源服务器上的指定的资源。

包括一下几个：

// header('Access-Control-Allow-Origin:*'); 允许的主机来源

// header('Access-Control-Allow-Methods:POST'); 允许的请求方法

// header('Access-Control-Allow-Headers:x-requested-with,content-type');设置允许请求自定义的请求头字段，多个字段以逗号分隔

2.jsonp，还需要服务端支持

JSONP的全称（JSON Padding）就是用JSON格式数据去填充结果，把远程服务器上的数据填充到一个回调函数中的逻辑。

Ajax无法请求远程服务器但是script标签的src可以发起一个远程请求（包括img, link, vedio，a等都可以跨域）。那么可以让script获取到一个远程服务器页面中数据它返回一段js代码，该段代码就是调用本地客户端（JS中）的一个方法并传入返回结果。

jsonp要求：

1）服务器必须以回调函数返回结果，接口支持jsonp返回值的格式

2）script请求时要指定一个回调函数名callback=show 并设置该回调函数show接受结果，

3.代理服务器，通用的技术，使用率最高。

客户端Ajax 因为同源策略无法请求远程服务器的资源，但本地服务器页面可以抓取远程服务器的资源，那么考虑让Ajax请求本地的服务器然后本地服务器请求远程服务器将获取结果给Ajax。

<script>
  let script = document.createElement('script');
  script.src = 'http://2113.com/2113/23-day/07-json2.php';
  document.body.appendChild(script);
  function fn(res){
    console.log(res);
    document.body.removeChild(script);
  }
</script>

Ajax跨域请求 2021.11.24

猜你喜欢