2021-04-20-JavaWeb项目跨域解决方案

1、为什么会有跨域问题的存在？

JavaScript出于安全方面的考虑，不允许跨域调用其他项目的对象，即同源政策。
所谓同源是指：协议相同,域名相同,端口相同。

比如：http://www.example.com/zw/index.html
协议是:http://
域名是:www.example.com
端口号是:80(默认端口可以省略)，
它的同源情况如下：
http://www.example.com/zwxk/manager.html 同源
https://www.example.com/zw/index.html 不同源
http://examle.com/zw/index.html 不同源
http://www.example.com:81zw/index.html 不同源

2、同源政策的目的

同源策略的目的是为了保证用户信息的安全。防止恶意的网站盗取数据。
设想这样一个情景：A网站是一家银行，用户登录以后，又去浏览其他的网站B，如果网站B可以读取A网站的Cookie,会发生什么问题？

3、非同源限制范围

随着互联网的发展，“同源政策”越来越严格。目前，如果非同源，共有三种行为受到限制。

• Cookie、LocalStorage和IndexDB无法获取。
• DOM无法获得。
• AJAX请求不能发送。

4、解决跨域问题方案

• 1、表单提交(http:xxxx)：加上http://
• 2、a标签，也要加上http://
• 3、location.href和a标签一样，加上http://
• 4、JavaScript<script>标签,src里面添加http://。。。
• 5、Ajax的JSONP
  $.ajax({
  url:“http://localhost:8080/hello”,
  dataType:“jsonp”,
  jsonpCallback:“callback”,
  success:function (data) {
  alert(data);
  }
  });

jsonp会自动帮我们在浏览器内创建一个callbak(data)的函数，只需后台返回该函数即可实现跨域发送请求，并接收数据
@RequestMapping(value = “/hello”)
@ResponseBody
@CrossOrigin
public String hello(String callback){
System.out.println(“HelloController.hello”);
return callback != null?callback+"(‘msg’)":“msg”;
}

后面的是防止有人在地址栏敲，callback+"(‘msg’)"是响应给浏览器一个函数名字，让浏览器去找到jsonp帮我们创建的等同名字的函数
上面两个要配套使用

• 6、@CrossOrigin
  @CrossOrigin注解给响应头中添加了一个Access-Control-Allow-Origin: *属性来完成跨域

• 7、通过修改document.domain来跨子域

• 8、使用window.name来进行跨域:window对象有个name属性，该属性有个特征：即在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name的，每个页面对window.name都有读写的权限，window.name是持久存在一个窗口载入过的所有页面中的，并不会因新页面的载入而进行重置。