前言

  项目中需要将第三方系统中,对应用户的代办消息集成到系统中。对方提供了获取对应用户的接口url,但是由于两边的系统是部署到客户现场不同IP的虚机上的,所以进行ajax请求的时候是属于跨域请求的。之前基本没有出现过这种情况,但是知道有跨域这个点,具体怎么解决,只知道ajax 有datatype:'jsonp' 是解决跨域请求的。但是当时并没有解决问题,因为后台数据接口并没有提供jsonp格式的函数方法,而只是json。用ajax解析json 的那一套去解析jsonp,当然行不通了。

跨域请求的迹象?

  No 'Access-Control-Allow-Origin' header is present on the requested resource. 

  此时就是在提示你 存在跨域请求,我也是在这个时候发现 了进行了跨域请求。然后,我在ajax中添加了 datatype:'jsonp' (不了解的童鞋请查看jquery官方文档中的$.ajax部分)进行跨域请求。但是,添加以后,居然还是提示错误:Uncaught SyntaxError: Unexpected token : (出现这个问题的原因就是 使用ajax 解析json 的方式直接去解析了jsonp格式,钥匙对不上锁...)

这个时候,就由于对跨域请求不是有很多了解,导致我知道出现了什么问题?但不知道怎么解决!很尴尬......>_<

接下来,就一起来看一下跨域请求中的问题以及如何解决 还有jsonp 解决跨域请求的原理是什么?

  什么情况下属于跨域请求呢?

  不同的域名或者不同的端口都属于跨域请求!

  

  json格式与jsonp格式究竟有什么不同呢?

  

  很直观的就能看到,jsonp外面多了一层callback嵌套。这个callback就是url中使用ajax 指定 datatype:'jsonp' 自动在url后面添加的 ....?callback=jquery1.....  其中callback的值就是jsonp得外层嵌套的函数名。那么后台有该如何解决呢?

  后台代码增加跨域支持

  获取request中参数 callback的值 然后对 返回的 json 进行 jsonp格式包装。    callback + "("+json+")" 

  

  如此后台代码添加对jsonp的跨域支持以后,就可以直接使用ajax指定datatype:'jsonp'的方式进行解析数据了。

  jsonp是如何解决跨域请求的呢?

  ajax跨域请求的解决办法有很多,其中jsonp是比较常用的方法,但是这种方法只支持GET请求,即使设置ajax请求方式为POST ,也会自动变更为GET请求。

  script标签的src可以跨域请求资源,但是ajax请求不可以跨域请求。jsonp 就是利用这一特性进行的跨域请求。  

  1、  jsonp通过script标签的src可以跨域请求的特性,加载资源

  2、  将加载的资源(通过一个方法名将数据进行包裹)当做是js脚本解析

  3、  定义一个回调函数,获取传入的数据

  

Ajax跨域请求怎么解决?的更多相关文章

  1. JQuery的Ajax跨域请求的解决方式

            今天在项目中须要做远程数据载入并渲染页面,直到开发阶段才意识到ajax跨域请求的问题,隐约记得Jquery有提过一个ajax跨域请求的解决方式,于是即刻翻出Jquery的API出来研究 ...

  2. jQuery ajax跨域请求的解决方法

    在Ajax应用中,jQuery的Ajax请求是非常容易而且方便的,但是初学者经常会犯一个错误,那就是Ajax请求的url不是本地或者同一个服务器下面的URI,最后导致虽然请求200,但是不会返回任何数 ...

  3. Jquery DataTable AJAX跨域请求的解决方法及SSM框架下服务器端返回JSON格式数据的解决方法

    如题,用HBuilder开发APP,涉及到用AJAX跨域请求后台数据,刚接触,费了不少时间.幸得高手指点,得以解决. APP需要用TABLE来显示数据,因此采用了JQ 的DataTable.  在实现 ...

  4. AJAX 跨域请求的解决办法:使用 JSONP获取JSON数据

    由于受到浏览器的限制,ajax不允许跨域通信.如果尝试从不同的域请求数据,会出现安全错误.如果能控制数据驻留的远程服务器并且每个请求都前往同一域,就可以避免这些安全错误.但是,如果仅停留在自己的服务器 ...

  5. JQuery的Ajax跨域请求原理概述及实例

    今天在项目中需要做远程数据加载并渲染页面,直到开发阶段才意识到ajax跨域请求的问题,隐约记得Jquery有提过一个ajax跨域请求的解决方式,于是即刻翻出Jquery的API出来研究,发 JQuer ...

  6. jquery ajax跨域的完美解决方法(jsonp方式)

    ajax跨域请求的问题,JQuery对于Ajax的跨域请求有两类解决方案,不过都是只支持get方式,接下来为大家详细介绍下客户端JQuery.ajax的调用代码     今天在项目中需要做远程数据加载 ...

  7. [转载]JQuery的Ajax跨域请求的解决方案

    今天在项目中需要做远程数据加载并渲染页面,直到开发阶段才意识到ajax跨域请求的问题,隐约记得Jquery有提过一个ajax跨域请求的解决方式,于是即刻翻出Jquery的API出来研究,发现JQuer ...

  8. 用iframe设置代理解决ajax跨域请求问题

    面对ajax跨域请求的问题,想用代理的方式来解决这个跨域问题.在服务器端创建一个静态的代理页面,在客户端用iframe调用这个代理 今天在项目中需要做远程数据加载并渲染页面,直到开发阶段才意识到aja ...

  9. 第114天:Ajax跨域请求解决方法(二)

    一.什么是跨域 我们先回顾一下域名地址的组成: http:// www . google : 8080 / script/jquery.js   http:// (协议号)       www  (子 ...

随机推荐

  1. C#图解教程读书笔记(第8章 表达式和运算符)

    表达式 字面量 整数字面量 字符字面量 字符串字面量 求值顺序 优先级 结合性 与C和C++不同,在C#中的数字不具有布尔意义. 各种运算符的作用(过) 用户定义类型转换 class XiXiInt ...

  2. 使用Android Studio和Gradle编译NDK项目之Experimental Plugin User Guide

    转载自:http://tools.android.com/tech-docs/new-build-system/gradle-experimental Introduction The new exp ...

  3. Spring Framework5.0 学习(4)—— 基本概念

    1.0  控制反转(IOC)/依赖注入(DI) 通过依赖注入(DI),对象的依赖关系将由负责协调系统关系中各个对象的第三方组件在创建对象是设定.对象无需自行创建或管理它们的依赖关系——依赖关系将被自动 ...

  4. spring mvc(4)处理模型数据

    处理模型数据 Spring MVC 提供了以下几种途径输出模型数据: – ModelAndView: 处理方法返回值类型为 ModelAndView时, 方法体即可通过该对象添加 模型数据 – Map ...

  5. 商品数量编辑按钮3D效果动画

    .move-enter-active transition:all 0.4s linear transform:rotate(180deg).move-leave-active transition: ...

  6. R语言学习笔记1——R语言中的基本对象

    R语言,一种自由软件编程语言与操作环境,主要用于统计分析.绘图.数据挖掘.R本来是由来自新西兰奥克兰大学的Ross Ihaka和Robert Gentleman开发(也因此称为R),现在由“R开发核心 ...

  7. 设计模式——Spirng_Bean工厂

    前言:对于简单工厂和抽象工厂都有自己的优点和缺点, 比如简单工厂,如果你需要实现的类过多,你最后会出现工厂泛滥的情况,没有有效的控制代码的可重复性.http://www.cnblogs.com/xia ...

  8. ejs模版实现递归树形结构渲染

    使用过前端模板的同学们,尤其是使用过nodejs写后台服务的同学们,应该对ejs模板和jade模板都不陌生.对与ejs模板和jade模板孰强孰弱,载各大论坛中一直争论不休,有说ejs更直观的,也有说j ...

  9. STC12LE5620AD RAM问题

    1.此款单片机内部有 sram:768B=512B(aux)+256B(Internal) 2.内部RAM解析 2. 3.内部扩展RAM 4.keil中可以选择内存类型 5. 网上摘抄的一段话: 在S ...

  10. 【2017002】C#FTP上传文件

    //上传文件 public static Boolean FtpUpload(string ftpPath, string localFile, FtpServer svr) { //检查目录是否存在 ...