用浏览器,通过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. hdu 1423 最长上升递增子序列

    #include <iostream> #include <cstdio> #include <cstring> using namespace std; ; in ...

  2. 【CF1043A】Elections(签到)

    题意:给定n个数字,第i个为a[i],求使得sigma k-a[i]>sigma a[i]最小的k n,a[i]<=1e2 思路: #include<cstdio> #incl ...

  3. Android开发跳坑记录

    本文主要记录在Android开发中遇见的一些问题,以及解决方法. 2015.12.01 1.adb.exe 端口被占用 解决: http://blog.csdn.net/xiaanming/artic ...

  4. unbuntu 矫正电脑系统时间

    sudo tzconfig,如果命令不存在请使用 dpkg-reconfigure tzdata

  5. alloc_chrdev_region申请一个动态主设备号,并申请一系列次设备号

    ret = alloc_chrdev_region(&ndev, 0, 1, "chr_dev"); //分配设备号 alloc_chrdev_region申请一个动态主设 ...

  6. [转]在Storyboard中使用自定义的segue类型

    转自:http://my.oschina.net/u/728866/blog/92709 我们知道segue共有三种类型:push.modal以及custom.如下图:   很明显,这三种类型的作用分 ...

  7. vue element-ui Tabs 标签页实现【更多】功能

    element-ui Tabs本身是没有更多功能的,如果在外边添加一个更多按钮,又非常不好看, 而利用API中Tabs Attributes的before-leave勾子方法可以实现这个功能, 简单P ...

  8. Android学习--RecyclerView

    前面一篇总结了ListView,在这篇我们总结一些这个RecyclerView,我们就从最基本的开始,安卓团队是将RecyclerView定义在support库当中的,因此想要使用RecyclerVi ...

  9. 2016集训测试赛(二十六)Problem A: bar

    Solution 首先审清题意, 这里要求的是子串而不是子序列... 我们考虑用1表示p, -1表示j. 用sum[i]表示字符串前\(i\)的前缀和. 则我们考虑一个字符串\([L, R]\)有什么 ...

  10. Jenkins插件HTML Publisher Plugin的使用

    前提: 下载插件HTML Publisher plugin 一.安装 安装好HTML Publisher plugin之后,会在新建或者编辑项目时,在[增加构建后操作步骤]出现[Publish HTM ...