用浏览器,通过XHR(XMLHttpRequest)请求向另外一个域名请求数据时。会碰到跨域(CORS)问题。

CORS:Cross-Origin Resource Sharing

什么是跨域?

简单的来说,出于安全方面的考虑,浏览器页面中的JavaScript无法訪问其它server上的数据,即“同源策略”。而跨域就是通过某些手段来绕过同源策略限制,实现不同server之间的通信。

哪些情况同意跨域訪问。哪些不同意?见下表,http://www.a.com/a.js訪问下面URL的结果:

URL 说明 是否同意通信
http://www.a.com/b.js 同一域名下 同意
http://www.a.com/script/b.js 同一域名下不同目录 同意
http://www.a.com:8000/b.js 同一域名。不同port 不同意
https://www.a.com/b.js 同一域名,不同协议 不同意
http://70.32.92.74/b.js 域名和域名相应ip 不同意
http://script.a.com/b.js 主域同样,子域不同 不同意
http://a.com/b.js 同一域名,不同二级域名(同上) 不同意
http://www.b.com/b.js 不同域名 不同意


解决方法:

主要的解决思路就是利用filter在response中增加一个头"Access-Control-Allow-Origin",比方:

response.setHeader("Access-Control-Allow-Origin", "*");     //同意全部请求
response.setHeader("Access-Control-Allow-Origin", "http://www.baidu.com:80");    //仅仅同意来自http://www.baidu.com:80的请求,用逗号分开

详细的解决方式:

1、自己定义filter。在filter中给response增加header: ("Access-Control-Allow-Origin", "*")

/**
* 防止浏览器缓存页面或请求结果
* @author XuJijun
*
*/
public class NoCacheFilter implements Filter { @Override
public void destroy(){
} @Override
public void doFilter(ServletRequest req, ServletResponse resp, FilterChain chain) throws IOException, ServletException {
HttpServletResponse response = (HttpServletResponse)resp; response.setDateHeader("Expires", -1);
response.setHeader("Cache_Control", "no-cache");
response.setHeader("Pragma", "no-cache"); response.setHeader("Access-Control-Allow-Origin", "*"); //同意跨域请求 chain.doFilter(req, resp);
} @Override
public void init(FilterConfig arg0) throws ServletException {
}
}

结果图:


或使用第三方软件包:

2、http://software.dzhuvinov.com/cors-filter.html

3、https://github.com/eBay/cors-filter

或mvnrepository上搜索“cors filter”:http://mvnrepository.com/search?q=cors-filter

已经过时的解决方法:JSONP

什么是JSONP?

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,而JSONP(JSON with Padding)则是JSON 的一种“使用模式”,通过这样的模式能够实现数据的跨域获取。

在同源策略下。在某个server下的页面是无法获取到该server以外的数据的,但img、iframe、script等标签是个例外,这些标签能够通过src属性请求到其它server上的数据。利用script标签的开放策略,我们能够实现跨域请求数据,当然,也须要服务端的配合。

当我们正常地请求一个JSON数据的时候,服务端返回的是一串JSON类型的数据,而我们使用JSONP模式来请求数据的时候,服务端返回的是一段可运行的JavaScript代码。


參考文章:

(原创文章。转载请注明转自Clement-Xu的csdn博客:http://blog.csdn.net/clementad/article/details/47008803

Ajax请求的跨域(CORS)问题的更多相关文章

  1. ajax请求ashx跨域问题解决办法

    ajax请求ashx跨域问题解决办法 https://blog.csdn.net/windowsliusheng/article/details/51583566 翻译windowsliusheng  ...

  2. AJAX请求和跨域请求详解(原生JS、Jquery)

    一.概述 AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. AJAX = 异步 JavaScript 和 XML,是一种用于创建快速动态网页的技术.通过在后台与服务器进行少量数 ...

  3. Asp.Net Core 3.0 学习3、Web Api 文件上传 Ajax请求以及跨域问题

    1.创建Api项目 我用的是VS2019 Core3.1 .打开Vs2019 创建Asp.Net Core Web应用程序命名CoreWebApi 创建选择API 在Controller文件夹下面添加 ...

  4. Ajax请求WebService跨域问题 [转载]

    1.背景 用Jquery中Ajax方式在asp.net开发环境中WebService接口的调用 2.出现的问题 原因分析:浏览器同源策略的影响(即JavaScript或Cookie只能访问同域下的内容 ...

  5. Ajax请求,跨域小坑

    今天在上班的时候,被坐在旁边项目经理叫过去问了一个Ajax请求跨域的问题,一开始没理解清楚也还有对这个没有理解的透,后面被打击的要死. 当时的需求是需要测试一个已发布的api接口,需要在本地写测试程序 ...

  6. 从零开始学 Web 之 Vue.js(四)Vue的Ajax请求和跨域

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  7. SpringMVC处理ajax请求的跨域问题和注意事项

    .首先要知道ajax请求的核心是JavaScrip对象和XmlHttpRequest,而浏览器请求的核心是浏览器我的个人博客(基于SSM,Redis,Tomcat集群的后台架构) github:htt ...

  8. jQuery解决ajax请求的跨域问题

    这两天工作中频繁的遇到JS的跨域问题,都通过绕开ajax请求的方式.特地百度了一下,把跨域问题解决了.在这分析一下 首先贴上js的页面代码: <html> <head> < ...

  9. Ajax请求WebService跨域问题

    1.背景 用Jquery中Ajax方式在asp.net开发环境中WebService接口的调用 2.出现的问题 原因分析:浏览器同源策略的影响(即JavaScript或Cookie只能访问同域下的内容 ...

随机推荐

  1. 【02】【转】Nodejs学习笔记(三)--- 事件模块

    目录 简介及资料 事件常用函数及使用 emitter.on(event, listener) emitter.emit(event, [arg1], [arg2], [...]) emitter.on ...

  2. iOS多线程:『GCD』详尽总结 ---(转)

    文章:https://bujige.net/blog/iOS-Complete-learning-GCD.html 文中 Demo 我已放在了 Github 上,Demo 链接:https://git ...

  3. Nginx + tomcat 实现简单集群(基于反向代理方式)

    一.安装 nginx 1. nginx依赖以下一些软件库,在安装之前请确保安装了这些软件库,它们包括:gcc,openssl,zlib,pcre(可通过rpm -q命令查询是否已安装) 可通过命令 r ...

  4. pat 团体天梯赛 L2-007. 家庭房产

    L2-007. 家庭房产 时间限制 400 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序给定每个人的家庭成员和其自己名下的房产,请你统计出每个家庭的人口数.人均房产面积及房产 ...

  5. python面试模拟真题讲解

    一.选择题(32分) 1.python不支持的数据类型有:(A) A.char B.int C.float D.list 2.x = “foo” y = 2 print(x+y)           ...

  6. asp.net 字符串替换、截取。

    有时候要在一段字符串里面把某些字符替换成其他字符,怎么办? 例如: string image=@"csks/news/user_top/qqqq/qqqq.jpg"; image ...

  7. 【BZOJ4542】大数(莫队)

    题意:给定一个N位的由[0..9]组成的数字串和质数P,有M次不强制在线的询问,每次询问区间[l,r]中模P意义下为0的子串个数 N,M<=2e5,P<=1e10 思路:一次A,本来还以为 ...

  8. 【CF1068A】Birthday(签到)

    题意:有N种棋子,M个人,已有K种收藏,要求最小的每个人送的棋子数使得最坏情况下至少有L种新的收藏,无解输出-1 N,M,K,L<=1e18 思路: #include<cstdio> ...

  9. configurationmanager.getsection usage example.

    1.app.config(note that attribute case sensitive!) <?xml version="1.0" encoding="ut ...

  10. boost 库的下载和编译_Visual Studio 2013(转)

    原文转自 http://blog.csdn.net/lp310018931/article/details/47791143 原文转自 http://m.blog.csdn.net/article/d ...