JavaScript跨域请求

个人博客：打开链接

1 什么是跨域

Js为了安全有一个限制，不允许跨域访问。
1、如果两个url的域名不同
2、Url相同，端口不同也是跨域
3、Ip不同也是跨域

2 解决跨域的问题

可以使用jsonp解决跨域的问题。
1、在js中不能跨域请求数据，js可以跨域请求js片段。
2、可以把数据包装成js片段。可以把数据使用js方法来包装，形成一条方法的调用语句。
3、可以使用ajax请求js片段，当js判断到达浏览器会被立即执行。
4、在浏览器端，先创建好回调方法，在回调方法中通过参数可以获得请求的数据。
前期准备：
1、需要把js的回调方法先写好。
2、做ajax请求时，需要把回调方法的方法名传递给服务端。
3、服务端接收回调方法名，把数据包装好，响应给客户端。

3 跨域请求Controller实现

响应一个json数据。判断callback参数是否为空，如果为空正常返回json数据，如果不为空，支持jsonp调用。
需要使用@ResponseBody注解。

支持jsonp两种方式：
第一种：直接响应字符串

@Controller
@RequestMapping("/item/cat")
public class ItemCatController {@Autowiredprivate ItemCatService itemCatService;@RequestMapping(value="/list",produces=MediaType.APPLICATION_JSON_VALUE+";charset=utf-8")@ResponseBodypublic String getItemCatList(String callback) {ItemCatResult result = itemCatService.getItemCatList();if (StringUtils.isBlank(callback)) {//需要把result转换成字符串String json = JsonUtils.objectToJson(result);return json;}//如果字符串不为空，需要支持jsonp调用//需要把result转换成字符串String json = JsonUtils.objectToJson(result);return callback + "(" + json + ");";}}

第二种方法：
要求springmvc必须是4.1以上版本。
MappingJacksonValue

//第二种方法@RequestMapping(value="/list")@ResponseBodypublic Object getItemCatList(String callback) {ItemCatResult result = itemCatService.getItemCatList();if (StringUtils.isBlank(callback)) {//需要把result转换成字符串return result;}//如果字符串不为空，需要支持jsonp调用MappingJacksonValue mappingJacksonValue = new MappingJacksonValue(result);mappingJacksonValue.setJsonpFunction(callback);return mappingJacksonValue;}

4 js中处理

JavaScript跨域请求相关推荐

arcgis api for JavaScript _跨域请求
arcgis api for JavaScript 中出现跨域请求是常见问题, 通常出现类似如下错误消息类似: XMLHttpRequest cannot load http://10.32.2.7 ...
ajax 跨域 headers JavaScript ajax 跨域请求 +设置headers 实践
解决跨域调用服务并设置headers 主要的解决方法需要通过服务器端设置响应头.正确响应options请求,正确设置 JavaScript端需要设置的headers信息方能实现. 此处手札供后人参 ...
jsonp跨域原理_【网站技术解读①】Javascript实现跨域请求
推荐一个读者做的不错的编程学习网站: 网站:潜安域名:http://www.qianani.com 另外将会不定期推送近期网站用到的一些技术,讲一些核心原理,今天为第一篇问题由来: 最近一直在优化 ...
JavaScript跨域总结与解决办法
JavaScript跨域总结与解决办法什么是跨域 1.document.domain+iframe的设置 2.动态创建script 3.利用iframe和location.hash 4.window ...
关于ajax跨域请求（cross Domain）
Cross Domain AJAX主要就是A.com网站的页面发出一个XMLHttpRequest,这个Request的url是B.com,这样的请求是被禁止的,浏览器处于安全考虑不允许进行跨域访问, ...
AJAX 跨域请求 - JSONP获取JSON数据
Asynchronous JavaScript and XML (Ajax ) 是驱动新一代 Web 站点(流行术语为 Web 2.0 站点)的关键技术.Ajax 允许在不干扰 Web 应用程序的显示 ...
浏览器同源策略以及跨域请求时可能遇到的问题
跨域请求基础知识浏览器的同源策略浏览器的源指的是协议://域名:端口这样的URL组合.我们首先要明确几点 www.foo.com 和 foo.com 是不同域 www.foo.com 和 ww ...
循序渐进Python3（十一） --6-- Ajax 实现跨域请求 jsonp 和 cors
Ajax操作如何实现跨域请求? Ajax (XMLHttpRequest)请求受到同源策略的限制. Ajax通过XMLHttpRequest能够与远程的服务器进行信息交互,另外XMLHttpReque ...
JSONP实现Ajax跨域请求
前言由于浏览器存在同源策略的机制,所谓同源策略就是阻止从一个源(域名,包括同一个根域名下的不同二级域名)加载的文档或者脚本获取/或者设置另一个源加载的文档属性. 但比较特别的是:由于同源策略是浏览器 ...
前端跨域请求get_HTTP--跨域真的有这么难吗
前言以前写前端小项目的时候就听说过跨域这个词,什么 JSONP啊,CORS啊.感觉很高级,但是无奈项目太小没机会用上.今天就写篇博客总结一下常用的跨域操作. 为什么要跨域一般来说写项目的时候都是自 ...