跨域总结(jquery,php)

2024年4月26日 218次阅读 来源: sukies

引子

项目缘由，前后端跨域了，第一次涉及到跨域的内容，踩了蛮多坑的，总结一下，防止下次再碰到~

一、图片发送要求

由于图片是不会去推断是不是跨域的，然则也只能发送get要求，而且猎取不到返回值，能够用来监听页面接见数目或许广告点击数目

var img=new Image();
img.src='http://www.baidu.com';
img.onerror=function(){
 alert('error');
}
img.onload=function(){
 alert('success');
}

二、jsonp

jsonp只能用于get要求，设置dataType：’jsonp’

运用 JSONP 情势挪用函数时，如 “myurl?callback=?” jQuery 将自动替代 ? 为准确的函数名，以实行回调函数。

$.ajax({
  url: "test.html",
  dataType：'jsonp',
  success: function(html){
      //
  }
});

实在完成就下面的结果，假如直接如许写,就是页面直接实行，要求胜利后实行页面的call函数

<script type="text/javascript" src='http://www.aaa.com?callback=call'></script>

三、CORS，服务器端设置

1.服务器端设置许可要求的地点

 header( "Access-Control-Allow-Origin:*" );

2.设置可要求的体式格局

 header( "Access-Control-Allow-Methods:POST,GET" );

3.能够设置header头部内容许可增加的头部信息

header('Access-Control-Allow-Headers:value');
  $.ajax({
            type: "GET",
            url: '#',
            header:{//增加头部信息
                value:'123456'
            },
            crossDomain: true,
            success: function (data) {});

4.发送cookie

须要注重的是，假如要发送Cookie，Access-Control-Allow-Origin就不能设为星号，必需指定明白的、与要求网页一致的域名

    response.setHeader("Access-Control-Allow-Credentials","true");
  $.ajax({
            type: "GET",
            url: '#',
            crossDomain: true,
            xhrFields: {withCredentials: true},//发送cookie
            success: function (data) {});

完毕

参考：跨域资源共享 CORS 详解

    原文作者：sukies
    原文地址: https://segmentfault.com/a/1190000013529040
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞