用浏览器,通过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 监听绑定和取消事件

    1. 原生 JS 语言: 绑定:addEventListener(type, function, false) 取消: removeEventListener(type, function, fals ...

  2. Maven多模块项目依赖管理

    Maven多模块项目依赖管理及dependencies与dependencyManagement的区别 转自:http://blog.csdn.net/liutengteng130/article/d ...

  3. python斐波那契数列复杂度

    契数列 概述: 斐波那契数列,又称黄金分割数列,指的是这样一个数列:0.1.1.2.3.5.8.13.21.34.……在数学上,斐波纳契数列以如下被以递归的方法定义:F(0)=0,F(1)=1,F(n ...

  4. HDOJ 2222: Keywords Search

    Keywords Search Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Others ...

  5. HDU 4779:Tower Defense

    Tower Defense Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 132768/132768 K (Java/Others)T ...

  6. .NET泛型编程 性能提升工具 List<T>

    原文发布时间为:2009-10-27 -- 来源于本人的百度文章 [由搬家工具导入] 结论  .NET 2.0中的泛型是强有力的,你写的代码不必限定于一特定类型,然而你的代码却能具有类型安全性。泛型的 ...

  7. Codevs 1643 & 3027 线段覆盖

    1643 题意 给定若干条线段,问最多可以安排多少条使得没有重合. 思路 贪心,同安排schedule,按结束时间早的排序. Code #include <bits/stdc++.h> # ...

  8. 2016百度之星资格赛 Round1(2,3,4题)

    Problem B Accepts: 2515 Submissions: 9216 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536 ...

  9. ScrollView嵌套ViewPager,ViewPager内容不显示问题

    在ViewPager外面嵌套ScrollView时导致ViewPager 中内容不显示,解决的办法是在ScrollView标签下加入:android:fillViewport="true&q ...

  10. Android进阶之Fragment与Activity之间的数据交互

    1 为什么 因为Fragment和Activity一样是具有生命周期,不是一般的bean通过构造函数传值,会造成异常. 2 Activity把值传递给Fragment 2.1 第一种方式,也是最常用的 ...