文档章节

跨域之CORS

zjg23
 zjg23
发布于 2016/12/02 16:05
字数 977
阅读 519
收藏 48
点赞 0
评论 0

实验环境准备:

本地存在一个web应用,模拟服务端。调用其接口http://127.0.0.1:8080/PanServer/files/dir/1235/query返回如下

image

客户端用一个html模拟(直接在tomcat的webapps下建一个Cors的文件夹,将html放到Cors下面),源码如下:

<html>
<head>
<meta charset="utf-8" />
<script>
function success(text) {
var textarea = document.getElementById('test-response-text');
textarea.innerHTML = text;
}

function fail(code) {
var textarea = document.getElementById('test-response-text');
textarea.innerHTML = 'Error code: ' + code;
}

function helloAjax() {
var request = new XMLHttpRequest(); // 新建XMLHttpRequest对象

request.onreadystatechange = function () { // 状态发生变化时,函数被回调
if (request.readyState === 4) { // 成功完成
    // 判断响应结果:
    if (request.status === 200) {
        // 成功,通过responseText拿到响应的文本:
		//alert('request.responseText');
        return success(request.responseText);
    } else {
        // 失败,根据响应码判断失败原因:
		//alert('request.status');
        return fail(request.status);
    }
} else {
    console.log('continuing……');
}
}

// 发送请求:
request.open('GET', 'http://localhost:8080/PanServer/files/dir/1235/query');
request.send();

alert('请求已发送,请等待响应...');
}

</script>
</head>
<body>
<div>
<p id="test-response-text"></p>
<p><button type="button" onclick="helloAjax()">刷新</button></p>
</div>
</body>
</html>

跨域测试:

1、浏览器内通过http://127.0.0.1:8080/Cors/corstest.html发起客户端调用,点击“刷新”按钮触发http://localhost:8080/PanServer/files/dir/1235/query的跨域调用

(注,localhost和127.0.0.1 作为主机名,不同,故为跨域调用),浏览器中会受到调用失败的提示

image

2、浏览器内通过http://localhost:8080/Cors/corstest.html发起客户端调用,点击“刷新”按钮触发http://localhost:8080/PanServer/files/dir/1235/query的调用

此时协议、主机名、端口均相同则不为跨域调用,可以成功返回

image

问题解决:

既然模拟出了跨域场景,接着就是用CORS的方式来让跨域调用成功。

 

tomcat下的配置
下载cors-filter-1.7.jar,java-property-utils-1.9.jar这两个库文件,放到lib目录下。(可在
http://search.maven.org上查询并下载。)服务端的工程项目中web.xml中添加如下配置: 

<filter>  
    <filter-name>CORS</filter-name>  
    <filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class>  
    <init-param>  
     <param-name>cors.allowOrigin</param-name>  
        <param-value>*</param-value>  
    </init-param>  
    <init-param>  
     <param-name>cors.supportedMethods</param-name>  
        <param-value>GET, POST, HEAD, PUT, DELETE</param-value>  
    </init-param>  
    <init-param>  
     <param-name>cors.supportedHeaders</param-name>  
        <param-value>Accept, Origin, X-Requested-With, Content-Type, Last-Modified</param-value>  
    </init-param>  
    <init-param>  
        <param-name>cors.exposedHeaders</param-name>  
        <param-value>Set-Cookie</param-value>  
    </init-param>  
    <init-param>  
        <param-name>cors.supportsCredentials</param-name>  
        <param-value>true</param-value>  
    </init-param>  
</filter>  
<filter-mapping>  
    <filter-name>CORS</filter-name>  
    <url-pattern>/*</url-pattern>  
</filter-mapping>

 

可以看到之前失败的跨域调用已经可以成功调用

image

CORS的原理:

CORS需要浏览器和服务器同时支持。目前,所有浏览器都支持该功能,IE浏览器不能低于IE10。整个CORS通信过程,都是浏览器自动完成,不需要用户参与。对于开发者来说,CORS通信与同源的AJAX通信没有差别,代码完全一样。浏览器一旦发现AJAX请求跨源,就会自动添加一些附加的头信息,有时还会多出一次附加的请求,但用户不会有感觉。因此,实现CORS通信的关键是服务器。只要服务器实现了CORS接口,就可以跨源通信。

以刚才成功的跨域请求为例

浏览器发现这次跨域请求是简单请求(什么是简单请求参看跨域资源共享 CORS 详解),就自动在头信息之中,添加一个Origin字段。

image

Origin字段用来说明,本次请求来自哪个源(协议 + 域名 + 端口)。服务器根据这个值,决定是否同意这次请求。如果Origin指定的源,不在许可范围内,服务器会返回一个正常的HTTP回应。浏览器发现,这个回应的头信息没有包含Access-Control-Allow-Origin字段,就知道出错了,从而抛出一个错误;如果Origin指定的域名在许可范围内,服务器返回的响应,会多出几个头信息字段。

image

这几个字段就是我们刚才添加的fileter添加的。浏览器看到这几个头消息之后,就可以正常响应了,不会再进行拦截。上面只是简单介绍了CORS的原理,详细可以 看参考文档。

参考文档:

http://www.ruanyifeng.com/blog/2016/04/cors.html

© 著作权归作者所有

共有 人打赏支持
zjg23
粉丝 18
博文 119
码字总数 39774
作品 0
济南
程序员
SpringBoot 实现前后端分离的跨域访问(CORS)

一、基本介绍 CORS是一种访问机制,英文全称是Cross-Origin Resource Sharing,即我们常说的跨域资源共享,通过在服务器端设置响应头,把发起跨域的原始域名添加到Access-Control-Allow-Orig...

Jokey2017
2017/11/14
0
0
AJAX POST&跨域 解决方案 - CORS

 跨域是我在日常面试中经常会问到的问题,这词在前端界出现的频率不低,主要原因还是由于安全限制(同源策略, 即JavaScript或Cookie只能访问同域下的内容),因为我们在日常的项目开发时会不...

zyt_1978
2016/03/28
64
0
ajax post跨域解决方案

概述 CORS能做什么: 正常使用AJAX会需要正常考虑跨域问题,所以伟大的程序员们又折腾出了一系列跨域问题的解决方案,如JSONP、flash、ifame、xhr2等等。 本文介绍的CORS就是一套AJAX跨域问题...

进击的程序员
2014/02/20
0
1
Java Web应用中支持跨域请求

由于工程合作开发的需要,后台的应用要能支持跨域访问,但是在这个跨域访问“时好时坏”,我们这帮屌丝所知道的就是加上两个jar包,然后声明一下Filter,感觉很简单的有没有!!感觉自己很牛...

lmy86263
2016/06/21
0
0
HTML5安全:CORS(跨域资源共享)简介

前言:像CORS对于现代前端这么重要的技术在国内基本上居然很少有人使用和提及,在百度或者Google上搜索CORS,搜到的中文文章基本都是另外一种卫星定位技术CORS的介绍,让我等前端同学情何以堪...

mac_zhao
2014/10/02
0
1
Tomcat 7 下 java web 项目 跨域CORS请求解决方案

首先我们先看下什么是 CORS(跨来源资源共享/跨域资源共享) 跨域资源共享(CORS )是一种网络浏览器的技术规范,它为Web服务器定义了一种方式,允许网页从不同的域访问其资源。简单来说就是...

蜗牛崛起
2016/07/28
94
0
前端筑基篇(一)->ajax跨域原理以及解决方案

说明 本文内容较老,而且已经不再更新,最新更新请移步 http://www.jianshu.com/p/82b82d5dd1ea 跨域主要是由于浏览器的“同源策略”引起,分为多种类型,本文主要探讨Ajax请求跨域问题 前言 ...

撒网要见鱼
2016/09/21
0
0
浅谈跨域以及WebService对跨域的支持

跨域问题来源于JavaScript的同源策略,即只有 协议+主机名+端口号 (如存在)相同,则允许相互访问。也就是说JavaScript只能访问和操作自己域下的资源,不能访问和操作其他域下的资源。 在以前...

冬瓜1
2016/01/21
18
0
CORS跨域资源共享

介绍 CORS(Cross-Origin Resource Sharing)是指跨域资源共享,用于解决前端跨域问题。跨域问题最参见的方法就是使用,但是很多跨域问题是无法解决的,比如 POST跨域请求 的脚本错误提示 中无...

chenhao_ch
2017/11/29
0
0
CORS(Cross-Origin Resource Sharing) 跨域资源共享

CORS(Cross-Origin Resource Sharing) 跨域资源共享 CORS 全称:Cross-Origin Resource Sharing 中文意思:跨域资源共享? 好吧,目前中文方面的资料还比较少,能搜索到的那仅有的几篇相关介...

我是小强
2013/06/12
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

防火墙实例

3、一个包过滤防火墙实例 环境:redhat9 加载了string time等模块 eth0 接外网──ppp0 eth1 接内网──192.168.0.0/24 #!/bin/sh modprobe ipt_MASQUERADE modprobe ip_conntrack_ftp modp...

李超小牛子
2分钟前
0
0
TensorFlow 作用域与操作符的受限范围

variable_scope 影响变量和操作符 name_scope 只影响操作符 with tf.name_scope(""),使用空字符串将作用域返回到顶层 tf.variable_scope("") 相当于添加一个空层 import tensorflow as tf...

阿豪boy
12分钟前
0
0
Java面试基础篇——第六篇:常见Map类的区别

常见的map类有: HashMap, ConcurrentHashMap (Jdk1.8) , LinkedHashMap, TreeMap, Hashtable。 其中我们最常用的莫过于HashMap, 和并发情况下使用的ConcurrentHashMap了,它们的主要区别就在...

developlee的潇洒人生
14分钟前
0
0
崛起于Springboot2.X之前端模版freemaker(23)

1、配置文件 spring: freemarker: allow-request-override: false cache: true check-template-location: true charset: UTF-8 content-type: text/html ......

木九天
30分钟前
1
0
spring-boot:run启动时,指定spring.profiles.active

Maven启动指定Profile通过-P,如mvn spring-boot:run -Ptest,但这是Maven的Profile。 如果要指定spring-boot的spring.profiles.active,则必须使用mvn spring-boot:run -Drun.profiles=test......

夜黑人模糊灬
32分钟前
0
0
大数据分析挖掘技术学习:Python文本分类

引言 文本分类作为自然语言处理任务之一,被广泛应用于解决各种商业领域的问题。文本分类的目的是将 文本/文档 自动地归类为一种或多种预定义的类别。常见的文本分类应用如下: • 理解社交媒...

加米谷大数据
37分钟前
0
0
istio-0.8 指标监控,prometheus,grafana

配置: https://istio.io/docs/tasks/telemetry/metrics-logs/ https://istio.io/docs/tasks/telemetry/tcp-metrics/ envoy拦截请求>上报mixer>对接prometheus>grafana 效果截图: promethe......

xiaomin0322
38分钟前
0
0
公众号推荐

阿里技术 书籍:《不止代码》

courtzjl
41分钟前
0
0
关于改进工作效率

1.给不同的业务线建立需求群,所有的数据需求都在群里面提。 2.对于特别难搞定的事情,到对应的技术哪去做,有问题随时沟通。 3.定期给工作总结形成方法论。 4.学习新的技术,尝试用新的方法...

Avner
48分钟前
0
0
关于thinkphp 框架开启路径重写,无法获取Authorization Header

今天遇到在thinkphp框架中获取不到header头里边的 Authorization ,后来在.htaccess里面加多一项解决,记录下: <IfModule mod_rewrite.c> Options +FollowSymlinks -Multiviews Rewrite......

殘留回憶
52分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部