用浏览器,通过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. 【CF1068D】Array Without Local Maximums(计数DP)

    题意: n<=1e5 思路:卡内存 dp[i][j][k]表示当前第i个数字为j,第i-1个数字与第i个之间大小关系为k的方案数(a[i-1]<a[i],=,>) 转移时使用前缀和和 ...

  2. 《Linux命令行与shell脚本编程大全 第3版》Linux命令行---33

    以下为阅读<Linux命令行与shell脚本编程大全 第3版>的读书笔记,为了方便记录,特地与书的内容保持同步,特意做成一节一次随笔,特记录如下:

  3. Spring Boot学习——Controller的使用

    本文主要记录几个注释的使用方法. 1. @Controller : 处理http请求 2. @RequestMapping : 配置URL映射 3. @RestController : 组合注解,sp ...

  4. LeetCode OJ-- Reverse Words in a String

    https://oj.leetcode.com/problems/reverse-words-in-a-string/ 给一个字符串 abc  dd  m,返回 m dd abc. 注意:输入中可能有 ...

  5. Unique Binary Search Trees II - LeetCode

    Given n, generate all structurally unique BST's (binary search trees) that store values 1...n. For e ...

  6. luogu P1314 聪明的质监员

    题目描述 小T 是一名质量监督员,最近负责检验一批矿产的质量.这批矿产共有 n 个矿石,从 1到n 逐一编号,每个矿石都有自己的重量 wi 以及价值vi .检验矿产的流程是: 1 .给定m 个区间[L ...

  7. 【转】又一次线上 OOM 排查经过

    又一次线上OOM排查经过 最近线上一个服务又出现了频繁Full GC的情况,导致提供的业务经常超时.问题出现非常不稳定,经过两周的时候,终于又捕捉到了一次Full GC,于是联系运维做Heap Dum ...

  8. openssl之EVP系列之12---EVP_Seal系列函数介绍

    openssl之EVP系列之12---EVP_Seal系列函数介绍     ---依据openssl doc/crypto/EVP_SealInit.pod翻译和自己的理解写成     (作者:Dra ...

  9. 立体3D方式 【转】

    目前为止,至少有四种普遍使用的立体3D传输格式,分别称为frame sequential(帧连续),frame packing(帧封装),side-by-side(并排),以及checkerboard ...

  10. 同步数据库到Codis代码

    同步mysql数据库到codis缓存中 public void syncRule() { // 根据时间戳获取Mycat中规则表数据 logger.info("start ..." ...