1.跨域描述:当两个应用协议、主机地址(或域名)、端口其中有一项不同,则认为他们的域不同的,例如:
http://cas.pinyougou.comhttp://cart.pinyougou.com
http://192.168.0.130/aaa
http://192.168.0.135/aaa
http://192.168.0.130/aaa
https://192.168.0.130/aaa
2.CORS介绍
常见的跨域解决方案JSONP和CORS,这里使用当下企业最流行的CORS跨域。CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing)。CORS需要浏览器和服务器同时支持。目前,所有浏览器都支持该功能,IE浏览器不能低于IE10。
它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制。
Access-Control-Allow-Origin是HTML5中定义的一种解决资源跨域的策略。他是通过服务器端返回带有Access-Control-Allow-Origin标识的Response header,用来解决资源的跨域权限问题。
3.SpringMVC中实现跨域
response.setHeader("Access-Control-Allow-Origin", "http://localhost:8081");也可以设置为 * 表示该资源谁都可以用,但是用了 * 就不能使用Cookie了。
4.含Cookie的跨域
CORS请求默认不发送Cookie和HTTP认证信息。如果要把Cookie发到服务器,一方面要服务器同意,指定Access-Control-Allow-Credentials字段。另一方面,在AJAX请求中打开withCredentials属性。response.setHeader("Access-Control-Allow-Credentials", "true");
5.注解形式实现跨域(需4.2或以上版本)
SpringMVC和SpringBoot都支持注解形式。@CrossOrigin(origins="http://localhost:8081",allowCredentials="true")
6.代码示例
前端:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script src="//cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script> </head> <body> <div class="container"> <button value="登录" onclick="doLogin()" >登录</button> <input hidden value=""> </div> </body> <script type="text/javascript"> function doLogin() { $.ajax({ url:'http://localhost:8080/cors', type:'POST', xhrFields:{withCredentials:true}, success:function(data){ console.log(data); var username = $.cookie('username'); console.log(username); } }) } </script> </html>
后端:
package com.neusoft.controller; import org.springframework.web.bind.annotation.CrossOrigin; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; import javax.servlet.http.Cookie; import javax.servlet.http.HttpServletResponse; @RestController public class CorsController { @RequestMapping("cors") @CrossOrigin(origins="http://localhost:8081",allowCredentials="true") public Object cors(HttpServletResponse response){ Cookie cookie = new Cookie("username","xiaoLuo"); response.addCookie(cookie); return "ok"; } }