跨域总结(jquery,php)

XboxYan 发布于2019-08-22 15:05 / 1794人阅读

摘要：引子项目原因，前后端跨域了，第一次涉及到跨域的内容，踩了蛮多坑的，总结一下，避免下次再遇到一图片发送请求因为图片是不会去判断是否跨域的，但是也只能发送请求，并且获取不到返回值，可以用来监听页面访问数量或者广告点击数量二只能用于请求，设置使用

引子

项目原因，前后端跨域了，第一次涉及到跨域的内容，踩了蛮多坑的，总结一下，避免下次再遇到~

一、图片发送请求

因为图片是不会去判断是否跨域的，但是也只能发送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函数

三、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 详解

GPU云服务器云服务器 jquery ajax 跨域 jquery跨域访问 jquery跨域请求 jquery跨域上传

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/93163.html

跨域总结(jquery,php)

摘要：引子项目原因，前后端跨域了，第一次涉及到跨域的内容，踩了蛮多坑的，总结一下，避免下次再遇到一图片发送请求因为图片是不会去判断是否跨域的，但是也只能发送请求，并且获取不到返回值，可以用来监听页面访问数量或者广告点击数量二只能用于请求，设置使用引子项目原因，前后端跨域了，第一次涉及到跨域的内容，踩了蛮多坑的，总结一下，避免下次再遇到~ 一、图片发送请求因为图片是不会去判断是否跨域的，...

dingding199389 2019-06-28 18:29 评论0 收藏0
前端知识点总结——JQ

摘要：前端知识点总结什么是第三方的极简化的操作的函数库第三方下载极简化是操作的终极简化个方面增删改查事件绑定动画效果操作学习还是在学，只不过简化了函数库中都是函数，用函数来解决一切问题为什么使用操作的终极简化解决了大部分浏览器兼容性问题凡是让用的前端知识点总结——JQ 1.什么是jQuery: jQuery: 第三方的极简化的DOM操作的函数库第三方: 下载极简化: 是DOM操作的...

jayzou 2019-08-22 14:59 评论0 收藏0
前端跨域总结

摘要：通过跨域通过引入的不受同源策略的限制，所以我们可以通过标签引入一个或者是一个其他后缀形式如，等的文件，此文件返回一个函数的调用。 1.跨域的定义只要协议、域名、端口有任何一个不同，就会被当做为不同的域，如果从A域名访问B域名上的资源就叫做跨域。下面我们来看下几种跨域的方法： 2.document.domain 浏览器的同源策略有一些限制，第一，不能通过ajax方法去请求不同源的资源...

Yang_River 2019-08-01 17:27 评论0 收藏0
前端跨域总结

摘要：通过跨域通过引入的不受同源策略的限制，所以我们可以通过标签引入一个或者是一个其他后缀形式如，等的文件，此文件返回一个函数的调用。 1.跨域的定义只要协议、域名、端口有任何一个不同，就会被当做为不同的域，如果从A域名访问B域名上的资源就叫做跨域。下面我们来看下几种跨域的方法： 2.document.domain 浏览器的同源策略有一些限制，第一，不能通过ajax方法去请求不同源的资源...

honmaple 2019-08-20 18:52 评论0 收藏0
前端跨域总结

摘要：通过跨域通过引入的不受同源策略的限制，所以我们可以通过标签引入一个或者是一个其他后缀形式如，等的文件，此文件返回一个函数的调用。 1.跨域的定义只要协议、域名、端口有任何一个不同，就会被当做为不同的域，如果从A域名访问B域名上的资源就叫做跨域。下面我们来看下几种跨域的方法： 2.document.domain 浏览器的同源策略有一些限制，第一，不能通过ajax方法去请求不同源的资源...

caiyongji 2019-07-25 15:02 评论0 收藏0