理解跨域
从一个站点访问一个资源,然后在这个资源当中又去访问另外的一个站点的资源,这个就是跨域。(域名,协议,端口三者有一个不一样就是跨域)
例如http://www.example.com/
http://api.example.com/detail.html | 不同源 | 域名不同 |
---|---|---|
https//www.example.com/detail.html | 不同源 | 协议不同 |
http://www.example.com:8080/detail.html | 不同源 | 端口不同 |
http://api.example.com:8080/detail.html | 不同源 | 域名、端口不同 |
https://api.example.com/detail.html | 不同源 | 协议、域名不同 |
https://www.example.com:8080/detail.html | 不同源 | 端口、协议不同 |
http://www.example.com/detail/index.html | 同源 | 只是目录不同 |
利用IDEA,tomcat部署项目
IDEA与tomacat集成,配置两个tomcat不同端口,记得在apche/conf/server.xml文件中修改
成功如图
采用多线程同时启动两个tomcat
利用jsonp跨域
- 其本质是利用了标签具有可跨域的特性,由服务端返回一个预先定义好的Javascript函数的调用,并且将服务器数据以该函数参数的形式传递过来,此方法需要前后端配合完成。
- jQuery 的$.ajax() 方法当中集成了JSONP的实现,可以非常方便的实现跨域数据的访问。
案例 jsonp 实现360 搜索案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>360 搜索</title>
<style>
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
</style>
<script src="../jquery/template-native.js"></script>
</head>
<body>
<div>
<input type="text" id="keyword"><input type="button" value="开课吧一下">
<div>
<ul>
</ul>
</div>
</div>
<script type="text/template" id="templateId">
<%for(var i=0;i<result.length;i++){%>
<li><%=result[i].word%></li>
<%}%>
</script>
<script>
function getInfo(obj){
var html=template("templateId",obj);
document.querySelector("ul").innerHTML=html;
}
document.querySelector("input[type=text]").onkeyup=function(){
// getInfo is not defined
var keyword=this.value;
if(keyword){
var script=document.createElement("script");
script.src="https://sug.so.360.cn/suggest?callback=getInfo&encodein=utf-8&encodeout=utf-8&format=json&fields=word&word="+keyword;
document.body.appendChild(script);
}
}
</script>
</body>
</html>
利用cors跨域(跨域资源共享)
跨域资源共享,它的原理就是在请求服务器的时候,服务器给一个响应头,告诉客户端,这些数据可以访问.
通过想客户端输出一个响应头
header("Access-Control-Allow-Origin:*"); 跨域资源共享
这种方式是服务器直接可一个给定一个响应头Access-Control-Allow-Origin,告诉客户端浏览器,这些数据可以获取。这个Access-Control-Allow-Origin也是属于http 协议规定的.
请求端口:8080
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>$Title$</title>
<script src="./js/jquery.min.js"></script>
<script type="text/javascript">
function jsonp_fun(){
$.ajax({
url:'http://localhost:8888?params=fromjsonp&callback=getResult',
type:'post',
dataType:'text',
success:function(data){
console.log(data);
}
});
}
function getResult(data){
alert(data.result);
}
</script>
</head>
<body>
<input type="button" value="jsonp" onclick="jsonp_fun()"/>
</body>
</html>
被请求的端口:8888
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>$Title$</title>
<script src="./js/jquery.min.js"></script>
</head>
<body>
<%
response.setHeader("Access-Control-Allow-Origin","http://localhost:8080");
response.setHeader("Access-Control-Allow-Methods","GET,POST,PUT,OPTIONS");
response.setHeader("Access-Control-Allow-Credentials","true");
%>
<%
String params = request.getParameter("params");
String callback = request.getParameter("callback");
// 经过该接口一系列操作,然后得到data,将data返回给调用者
String data = "{'result':'"+params+"'}";
out.println(callback + "("+data+")");
%>
cor coming
</body>
</html>
jsonp 与 cors 的区别
-
jsonp 是最早期的这种跨域解决方案,因为是使用script 标签发送请求,所以兼容性会比较好,只支持get 方式.
-
cors 是后期的一种解决方案. 它只需要改服务器的配置,客户端不需要做任何的处理。一个响应. ,兼容性稍微差一些,因为Access-Control-Allow-Origin 是后期http 协议规定的,如果浏览器不支持这个响应头,支持get ,以及post。
-
其它方式: 通过后台服务器转发,通过设置代理服务器。(例如Nginx代理)
Nginx代理服务器