Ajax跨域问题

1.跨域介绍

跨域它是不同的域名(服务器)之间的相互的资源的访问，因为受到浏览器的同源策略保护不能正常访问。

什么是同源策略？

同源策略/SOP（Same origin policy）是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。

Ajax跨域问题

1.问题：如果使用项目2中的页面访问项目1的资源,能否访问到?

结论:不能，因为跨域了.(会受到同源策略保护)

跨域请求可以请求到服务器的后台,后台也可以返回数据,但是被浏览器阻拦

3.问题:是不是所有跨域都会被浏览器阻拦?

结论:不是，浏览器拦截的跨域三特点:

1) 是浏览器限制

2) 跨域(当协议、子域名、主域名、端口号中任意一个不同)

3) XHR (XMLHttpRequest)请求

在跨域过程中,有些方式是不被浏览器拦截的:

<script src="地址"></script> 
<img src="地址"/>
<a href="地址">

2.为什么要解决跨域

以后我们的开发的项目是前后端分离，前台和后台是独立的，就需要前台调用后台的接口，导致出现问题。

3.跨域解决方案

一般情况是在自己的内部工程中会出现跨域情况。

方式1： 代理方案(了解)

把ajax请求其他服务器上的跨域问题进行转换,变成先请求自己的后台服务,通过后台服务间的调用,避免了ajax访问别的服务产生的跨域问题.

方式2：跨域解决方案CORS官方推荐的

CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。

它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信

浏览器禁止非同源访问，如果在头信息中设置了一些源便可以访问，浏览器检测到则不阻拦，解决同源策略。

后台代码：

//设置可以资源共享的路径是谁(访问-控制-允许-来源)
response.setHeader("Access-Control-Allow-Origin", "http://localhost:8080");
//设置认证信息,作用:携带Cookie
 response.setHeader("Access-Control-Allow-Credentials", "true");
 response.getWriter().write(json);

前台:

 $.ajax({
         url:"http://localhost:8081/day18_8081/demo02",
         async:true,
         data:"name=tom",
         type:"post",
         dataType:"json",
         // 如果服务器已经让携带cookie,浏览器还是不会携带,必须添加认证信息
         // 浏览器再次访问才会携带cookie
         xhrFields: {
            withCredentials: true
         },
         success:function (data) {
            alert(data.name);
         },
         error:function () {
            alert("失败")
         }
      });

方式3：jsonp

JSONP  (JSON with Padding)  是JSON的一种“使用模式”,理解为一个包裹着的json，可用于解决主流浏览器的跨域数据访问的问题.

结论：jsonp 可以解决浏览器跨域问题; 使用<script>标签来解决 ,因为<script>标签开放了同源保护策略.

后台代码：

  //获取到参数callback
  String callback = request.getParameter("callback");
  //对返回的json数据进行包裹
  response.getWriter().write(callback+"("+json+")");

前台:

 $.ajax({
		url:"http://localhost:8081/day18_8081/demo03",
		async:true,
		data:"name=tom",
		type:"post",
		dataType:"jsonp",
		success:function (data) {
			alert(data.name);
		},
		error:function () {
			alert("失败")
		}
	});

方式3.1：jsonp简化版本

 

$.getJson(url ,data, function(data){....})

//发送ajax
$.getJSON(
    "http://localhost:8081/day18_8081/demo04?callback=?",
    "name=tom",
    function (data) {
    });

后台代码：

没变化。