Ajax跨域请求怎么解决?
前言
项目中需要将第三方系统中,对应用户的代办消息集成到系统中。对方提供了获取对应用户的接口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跨域请求怎么解决?的更多相关文章
- JQuery的Ajax跨域请求的解决方式
今天在项目中须要做远程数据载入并渲染页面,直到开发阶段才意识到ajax跨域请求的问题,隐约记得Jquery有提过一个ajax跨域请求的解决方式,于是即刻翻出Jquery的API出来研究 ...
- jQuery ajax跨域请求的解决方法
在Ajax应用中,jQuery的Ajax请求是非常容易而且方便的,但是初学者经常会犯一个错误,那就是Ajax请求的url不是本地或者同一个服务器下面的URI,最后导致虽然请求200,但是不会返回任何数 ...
- Jquery DataTable AJAX跨域请求的解决方法及SSM框架下服务器端返回JSON格式数据的解决方法
如题,用HBuilder开发APP,涉及到用AJAX跨域请求后台数据,刚接触,费了不少时间.幸得高手指点,得以解决. APP需要用TABLE来显示数据,因此采用了JQ 的DataTable. 在实现 ...
- AJAX 跨域请求的解决办法:使用 JSONP获取JSON数据
由于受到浏览器的限制,ajax不允许跨域通信.如果尝试从不同的域请求数据,会出现安全错误.如果能控制数据驻留的远程服务器并且每个请求都前往同一域,就可以避免这些安全错误.但是,如果仅停留在自己的服务器 ...
- JQuery的Ajax跨域请求原理概述及实例
今天在项目中需要做远程数据加载并渲染页面,直到开发阶段才意识到ajax跨域请求的问题,隐约记得Jquery有提过一个ajax跨域请求的解决方式,于是即刻翻出Jquery的API出来研究,发 JQuer ...
- jquery ajax跨域的完美解决方法(jsonp方式)
ajax跨域请求的问题,JQuery对于Ajax的跨域请求有两类解决方案,不过都是只支持get方式,接下来为大家详细介绍下客户端JQuery.ajax的调用代码 今天在项目中需要做远程数据加载 ...
- [转载]JQuery的Ajax跨域请求的解决方案
今天在项目中需要做远程数据加载并渲染页面,直到开发阶段才意识到ajax跨域请求的问题,隐约记得Jquery有提过一个ajax跨域请求的解决方式,于是即刻翻出Jquery的API出来研究,发现JQuer ...
- 用iframe设置代理解决ajax跨域请求问题
面对ajax跨域请求的问题,想用代理的方式来解决这个跨域问题.在服务器端创建一个静态的代理页面,在客户端用iframe调用这个代理 今天在项目中需要做远程数据加载并渲染页面,直到开发阶段才意识到aja ...
- 第114天:Ajax跨域请求解决方法(二)
一.什么是跨域 我们先回顾一下域名地址的组成: http:// www . google : 8080 / script/jquery.js http:// (协议号) www (子 ...
随机推荐
- 为网页元素增加resize事件
默认只有window支持resize事件,但有时我们需要为div等元素添加resize事件 代码见下面,原理是在元素内添加一个内嵌html,然后监听这个内嵌html的resize事件 import { ...
- MQ中将消息发送至远程队列的配置
MQ中将消息发送至远程队列的配置 摘自MQ资源管理器帮助文档V7 在开始学习本教程之前,您需要从系统管理员处了解标识网络上接收机器的名称:IP地址.MQ的端口号.队列管理器.接收(远程机器)或者是发送 ...
- Spring Framework5.0 学习(1)—— 用Gradle构建一个Java Project
1.0 安装Gradle,参考之前文章<Gradle入门实战(Windows版)> 2.0 使用gradle 快速生成一个Java project gradle init --type ...
- 【[SCOI2008]奖励关】
又抄了一篇题解 要凉了要凉了,开学了我还什么都不会 文化课凉凉,NOIP还要面临爆零退役的历史进程 这道题挺神的,期望+状态压缩 我们设\(dp[i][S]\)表示在第\(i\)天前,捡的宝物状态为\ ...
- 安卓渗透测试工具Drozer学习笔记
下载,并安装. pip安装即可,安装完成后可能会出现缺少twisted依赖库的问题 ➜ vul git:(master) ✗ drozer console connect drozer Server ...
- 清除IE下input的叉叉
很多时候,我们在开发过程中,设计师会在输入框后加上定制的清除图标,但是在IE下有IE自带的清除图标,肯定是不美观的. <style> ::-ms-clear, ::-ms-reveal{d ...
- Java日期类题目
每类题都有各种各样解决的方式,大家随意发散 分析以下需求,并用代码实现 1.已知日期字符串:"2015-10-20",将该日期字符串转换为日期对象 2.将(1)中的日期对象转换为日 ...
- unittest单元测试框架之unittest 框架的总结2(八)
unittest 下的属性 1.Unittest.TestCase:所有测试用例类继承的基本类 2.Unittest.main():将一个单元测试模块变为可直接运行的测试脚本 If __name__ ...
- windows安装的mysql中文乱码的坑
本机装的mysql为5.6的,从代码执行的中文inert语句总是显示问号,然后在中文查询是都会报问题 今天终于解决了! 问题解决方法为: 找到my.ini文件在文件中加入 [client]defaul ...
- 一站式学习Redis 从入门到高可用分布式实践
1:redis 是用c语言来实现的,速度快 持久化 单线程 复杂的数据类型有bitmap和hyperloglog和geo地理信息2:高可用.分布式 v2.8开始支持Redis-Sentinel(哨兵) ...