用浏览器,通过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. JS 改变鼠标样式

    此片记录如何改变鼠标样式: document.body.style.cursor = "url(resource/pic/icons/magnifier3.cur) 12 12,crossh ...

  2. 【Codeforces Round #519】

    A:https://www.cnblogs.com/myx12345/p/9872082.html B:https://www.cnblogs.com/myx12345/p/9872124.html ...

  3. EF4.2预览版出来了

    原文发布时间为:2011-09-21 -- 来源于本人的百度文章 [由搬家工具导入] http://blogs.msdn.com/b/adonet/archive/2011/08/22/ef-4-2- ...

  4. 为了兼容性问题,本人一律淘汰不兼容如下三种浏览器的js

    原文发布时间为:2009-04-16 -- 来源于本人的百度文章 [由搬家工具导入] JavaScript: 不兼容 IE    FF火狐   Google 一律不作收藏了。。。。 最好还能兼容 Op ...

  5. ubuntu php编译安装配置

    安装参考:http://ilanni.blog.51cto.com/526870/1569322/ 加载扩展的一些参数参考:http://java-er.com/blog/nginx-php-fpm/

  6. poj 2280 Islands and Bridges 哈密尔顿路 状压dp

    题目链接 题意 给定一个\(N\)个点的无向图,求一条哈密尔顿路径\(C_1C_2...C_n\),使其\(value\)最大. \(value\)的计算方式如下:\[\begin{aligned}v ...

  7. uva 1611:Crane(构造 Grade D)

    题目链接 题意: 一个序列,你可以选择其中偶数长度的一段,然后中间切开,左右两段交换.现给你一个1~n的某个排列,求一个交换方案,使得排列最终有序.(交换次数 < 9^6) 思路: 从左到右,依 ...

  8. 阻止关闭窗口,FormCloseQuery

    procedure TfrmTopJdsMain.FormCloseQuery(Sender: TObject; var CanClose: Boolean); begin ) = mrNo then ...

  9. DOM-window下的常用子对象-location-刷新页面

    1.刷新当前页面:(通过给location.href赋值的方式) window.location.href="" eg:window.location.href="htt ...

  10. apache2.4+tomcat8+jk1.2.40集群配置

    由于目前很多apache+tomcat集群都是在apache2.2上配置的,Apache2.4的教程几乎没有,这里写一篇记录下来. 环境:apache2.4.12(Apache Haus编译版本).t ...