Ajax跨域问题及解决方案（jsonp，cors）

2024-09-29 01:22:02

跨域

跨域有三个条件，满足任何一个条件就是跨域

1：服务器端口不一致
2：协议不一致
3：域名不一致

解决方案：

1.jsonp

　　在远程服务器上设法动态的把数据装进js格式的文本代码段中，供客户端调用和进一步处理；在前台通过动态添加script标签及src属性，表面看上去与ajax极为相似，但是，这和ajax并没有任何关系；为了便于使用及交流，逐渐形成了一中非正式传输协议，人们把它称作 jsonp 。

代码如下：

html：

<body>
  <form action="/" method="post" enctype="multipart/form-data">
    <input type="text" name="xinxi" id="info"><br>
    <input type="file" name="file" id="file"><br>
    <input type="button" value="提交" name="submit" id="btn">
  </form>
</body>
<script src="./jquery.js"></script>
<script>
  //提前写好函数，调用函数需要传参
  function callback(data){
    alert(data);
  }
  //动态添加script标签及src属性
  $('#btn').on('click',function(){
    var sc = document.createElement('script');
    sc.src = 'http://soul:8888/kuayu?cb=callback';
    $('head').append(sc);
  })
</script>

js：

var http = require('http');
 var url = require('url');
 var server = http.createServer();
 server.listen('8888',function(){
   console.log('8888');
 });
 server.on('request',function(req,res){
   var urls = url.parse(req.url,true);
   if(urls.pathname == '/kuayu'){
     res.end('callback("jsonp")');//返回的数据需是前端定义的函数调用的形式
   }
 });

运行结果：

总结一下：

　　jsonp的一个要点就是允许用户传递一个callback参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了。

　　发现凡是拥有"src"这个属性的标签都拥有跨域的能力，比如script、img、iframe； src 的能力就是把远程的数据资源加载到本地(图片、JS代码等);

2.cors

cors跨域的核心点是在服务端代码中设置一个响应头即可

res.setHeader('Access-Control-Allow-Origin','*');

html：

<body>
  <form action="/" method="post" enctype="multipart/form-data" id="form">
    <input type="text" name="xinxi" id="info"><br>
    <input type="button" value="提交" name="submit" id="btn">
  </form>
</body>
<script src="./jquery.js"></script>
<script>
  $('#btn').on('click', function () {
        $.ajax({
            url: 'http://soul:8888/kuayu',
            type:'delete',
            async:false,
            success: function (data) {
              alert(data);
            },
        })
  })
</script>

js代码：

<body>
  <form action="/" method="post" enctype="multipart/form-data" id="form">
    <input type="text" name="xinxi" id="info"><br>
    <input type="button" value="提交" name="submit" id="btn">
  </form>
</body>
<script src="./jquery.js"></script>
<script>
  $('#btn').on('click', function () {
        $.ajax({
            url: 'http://soul:8888/kuayu',
            type:'delete',
            async:false,
            success: function (data) {
              alert(data);
            },
        })
  })
</script>

效果：

　　　很多人也认为使用CORS解决跨域很简单，只需要在服务器添加响应头 “ Access-Control-Allow-Origin ：* ” 就可以了，

其实不然，因为在CORS中，所有的跨域请求被分为了两种类型，一种是简单请求，一种是复杂请求 (严格来说应该叫‘需预检请求')；简单请求与普通的ajax请求无异；但复杂请求，必须在正式发送请求前先发送一个OPTIONS方法的请求已得到服务器的同意，若没有得到服务器的同意，浏览器不会发送正式请求；

满足以下所有条件，被视为简单类型的请求：

1：请求方法必须是 GET、HEAD、POST中的一种，其他方法不行；

2：请求头类型只能是 Accept、Accept-Language、Content-Language、Content-Type，添加其他额外请求头不行；

3：请求头 Content-Type 如果有，值只能是 text/plain、multipart/form-data、application/x-www-form-urlencoded 中的一种，其他值不行；

4：请求中的任意 XMLHttpRequestUpload 对象均没有注册任何事件监听器；

5：请求中没有使用 ReadableStream 对象。（以上摘自西岭老湿微信公众号）

总结一下：

如果请求方式为get和post简单请求，则只需要设置响应头：res.setHeader('Access-Control-Allow-Origin','*');来允许某一个域或者所有域进行数据共享；

若是其他方式的请求，会在发送真正的请求之前发送一个options请求，通过options请求里设置：res.setHeader('Access-Control-Allow-Methods', 'DELETE')，

告知服务器正式请求会使用哪一种 HTTP 请求方法。

总结

以上所述是小编给大家介绍的Ajax跨域问题及解决方案（jsonp，cors）,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

原生js的ajax和解决跨域的jsonp(实例讲解)

最近慢慢感觉,学再多框架,库,都不如老老实实先把基础弄扎实了. 不说废话,先上一个用ajax请求下本地的一个.txt文件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> window.onload =function(){ var oBtn = d
支持Ajax跨域访问ASP.NET Web Api 2(Cors)的示例教程

随着深入使用ASP.NET Web Api,我们可能会在项目中考虑将前端的业务分得更细.比如前端项目使用Angularjs的框架来做UI,而数据则由另一个Web Api 的网站项目来支撑.注意,这里是两个Web网站项目了,前端项目主要负责界面的呈现和一些前端的相应业务逻辑处理,而Web Api则负责提供数据. 这样问题就来了,如果前端通过ajax访问Web Api项目话,就涉及到跨域了.我们知道,如果直接访问,正常情况下Web Api是不允许这样做的,这涉及到安全问题.所以,今天我们这篇文章的主
浅谈JQuery+ajax+jsonp 跨域访问

Jsonp(JSON with Padding)是资料格式 json 的一种"使用模式",可以让网页从别的网域获取资料. 一. 客户端 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv=&q
AJax与Jsonp跨域访问问题小结

####JavaScript的AJax AJAX即"Asynchronous Javascript And XML"(异步JavaScript和XML) 设计AJax使用的一种重要技术是XMLHttpRequest对象. 创建XMLHttpRequest对象的方式: xmlhttp = new ActiveObject("Microsoft.XMLHTTP"); // IE浏览器支持的创建方式 xmlhttp = new XMLHTTPRequest(); // F
浅谈Koa2框架利用CORS完成跨域ajax请求

实现跨域ajax请求的方式有很多,其中一个是利用CORS,而这个方法关键是在服务器端进行配置. 本文仅对能够完成正常跨域ajax响应的,最基本的配置进行说明(深层次的配置我也不会). CORS将请求分为简单请求和非简单请求,可以简单的认为,简单请求就是没有加上额外请求头部的get和post请求,并且如果是post请求,请求格式不能是application/json(因为我对这一块理解不深如果错误希望能有人指出错误并提出修改意见).而其余的,put.post请求,Content-Type为appl
JSONP跨域GET请求解决Ajax跨域访问问题

前几天,工作上有一新需求,需要前端web页面异步调用后台的Webservice方法返回信息.实现方法有多种,本例采用jQuery+Ajax,完成后,在本地调试了一切ok,但是部署到服务器上以后就出现问题了,后台服务调用没有响应,怎么回事?代码没怎么改动,唯一修改的地方就是jQuery的ajax方法中的url地址.难道是这里的问题,经过检查和调试,发现原来是同源策略在作怪,我们知道,JavaScript或jQuery是在Web前端开发中经常使用的动态脚本技术.在JavaScript中,有一个很重要
详解Java Ajax jsonp 跨域请求

1.什么是JSONP 一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通,而 HTML 的<script> 元素是一个例外.利用 <script> 元素的这个开放策略,网页可以得到从其他来源动态产生的 JSON 资料,而这种使用模式就是所谓的 JSONP.用 JSONP 抓到的资料并不是 JSON,而是任意的JavaScript,用 JavaScript 直译器执行而不是用 JSON 解析器解析. JSONP是
AJAX跨域请求之JSONP获取JSON数据

Asynchronous JavaScript and XML (Ajax ) 是驱动新一代 Web 站点(流行术语为 Web 2.0 站点)的关键技术.Ajax 允许在不干扰 Web 应用程序的显示和行为的情况下在后台进行数据检索.使用 XMLHttpRequest 函数获取数据,它是一种 API,允许客户端 JavaScript 通过 HTTP 连接到远程服务器.Ajax 也是许多 mashup 的驱动力,它可将来自多个地方的内容集成为单一 Web 应用程序. 不过,由于受到浏览器的限制,该
通过jsonp获取json数据实现AJAX跨域请求

AJAX(异步的 JavaScript 和 XML)是用于创建快速动态网页的一种技术,它在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页,ajax 使用XMLHttpRequest对象在后台与服务器交换数据,XMLHttpRequest 是 AJAX 的基础,它允许客户端 JavaScript 通过 HTTP请求连接到远程服务器. 但是,由于受到浏览器的限制,这种方法不可以进行跨域访问,如果使用这种方法进行跨域访问则会出现安全问题.不过,我们可以发现,在web页面跨域调用 js文件时
Ajax跨域问题及解决方案（jsonp，cors）

跨域跨域有三个条件,满足任何一个条件就是跨域 1:服务器端口不一致 2:协议不一致 3:域名不一致解决方案: 1.jsonp 在远程服务器上设法动态的把数据装进js格式的文本代码段中,供客户端调用和进一步处理:在前台通过动态添加script标签及src属性,表面看上去与ajax极为相似,但是,这和ajax并没有任何关系:为了便于使用及交流,逐渐形成了一中非正式传输协议,人们把它称作 jsonp . 代码如下: html: <body> <form action="/&q
Ajax跨域的完美解决方案

公司要做一个活动页面,在其过程中发现所有的接口,ajax请求跨域.这里对跨域做个简单介绍以及提供几种解决办法. 由于浏览器实现的同源策略的限制,XmlHttpRequest只允许请求当前源(域名.协议.端口)的资源,所以AJAX是不允许跨域的.这里提供自己常用的三种方法: 1.jsonp访问 JSONP(JSON with Padding)是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问: 实现方式 1) <
关于Ajax跨域问题及解决方案详析

复现Ajax跨域问题做两个简单的小项目复现Ajax跨域问题. 后端语言使用Java 首先是一个简单的订单系统, 通过访问/loadOrderList, 最终以json串形式返回订单集合. 该项目使用Tomcat发布在7070端口. @RequestMapping("/loadOrderList") @ResponseBody public List<Order> loadOrderList(String uid){ //模拟订单数据 Order o1 = new Orde
JQuery Ajax 跨域访问的解决方案

具体情况有: 一.本域和子域的相互访问: http://www.aa.com/和book.aa.com 二.本域和其他域的相互访问: http://www.aa.com/和http://www.bb.com/ 用 iframe 三.本域和其他域的相互访问: http://www.aa.com/和http://www.bb.com/ 用 XMLHttpRequest访问代理四.本域和其他域的相互访问: http://www.aa.com/和http://www.bb.com/ 用 JS创建动态脚
Ajax跨域问题的解决办法汇总(推荐)

本篇将讲述一个小白从遇到跨域不知道是跨域问题,到知道是跨域问题不知道如何解决,再到解决跨域问题,最后找到两种方法解决ajax 跨域问题的全过程. 不知是跨域问题起因是这样的,为了复用,减少重复开发,单独开发了一个用户权限管理系统,共其他系统获取认证与授权信息,暂且称之为A系统:调用A系统以B为例.在B系统中用ajax调用A系统系统的接口(数据格式为json),当时特别困惑,在A系统中访问相应的url可正常回返json数据,但是在B系统中使用 ajax请求同样的url则一点儿反应都没有,好像
浅谈Ajax跨域Session和跨域访问

一.关于ajax跨域请求,用jsonp老是不成功,虽然可以返回数据,但是error处报错.原因是返回的数据格式不是jsonp格式.但是用C#构造的请求却能够返回数据. 二.第三方的ajax请求肯定是不能获取得到你当前用户的session. 任务是这样的的,支付宝的页面返回notify页面(这个页面是异步访问的),而我的C#处理有一个处理模块,需要判断如果是已经登录则加积分之类的操作,结果老是获取不到session数据,可是明明登录了啊.这里的误区是,我们当前域肯定是已经登录了,可对于支付宝那边的
Ajax跨域访问Cookie丢失问题的解决方法

ajax跨域访问,可以使用jsonp方法或设置Access-Control-Allow-Origin实现,关于设置Access-Control-Allow-Origin实现跨域访问可以参考之前我写的文章<ajax 设置Access-Control-Allow-Origin实现跨域访问> 1.ajax跨域访问,cookie丢失首先创建两个测试域名 a.fdipzone.com 作为客户端域名 b.fdipzone.com 作为服务端域名测试代码 setcookie.PHP 用于设置服务端co
PHP下ajax跨域的解决方案之jsonp实例分析

本文实例讲述了PHP下ajax跨域的解决方案之jsonp.分享给大家供大家参考,具体如下: 首先要说明一下json和jsonp的区别? json是一种基于文本的数据交换方式,或者叫做描述数据的一种格式. var person = { "name": "test", "age": "25", "sex": "男" }; var data = [1, 2, 3, 4, 5]; 而jsonp是
Ajax实现跨域访问最新解决方案

在实际项目当中,我们经常会遇到同一个域名下不同项目之间通过Ajax相互调用数据,这样问题就来了,如何通过Ajax实现跨域呢? 解决方案 1.Jsonp Jsonp解决跨域相对简单,服务器无需任何配置.具体实现如下: $.ajax({ type: 'get', url: 'http://xxx.com', data: {}, dataType: 'jsonp', success: function (data) { }, error: function (data) { mask.close();

Ajax跨域问题及解决方案（jsonp，cors）

相关推荐

随机推荐