跨域访问是什么！怎么解决？

Q:什么是跨域？

A:

• 简单来讲，跨域是指从一个域名的网页去请求另一个域名的资源
• 由于有同源策略的关系，一般是不允许这么直接访问的
• 但是，很多场景经常会有跨域访问的需求
• 比如，在前后端分离的模式下，前后端的域名是不一致，此时就会发生跨域问题

Q:刚刚提到同源策略，说说什么是同源策略？

A:

• 所谓同源是指”协议+域名+端口”三者相同，即便两个不同的域名指向同一个IP地址，也非同源。
• 同源策略限制一下几种行为：
  • Cookie，LocalStorage和IndexDB无法读取
  • DOM和Js对象无法获取
  • AJAX请求不能发送

Q:为什么要有同源策略呢？

A:

• 举个例子，假如你刚刚在网银输入账号秘密，查看来自己的余额，然后再去访问带有颜色的网站
• 这个网站可以访问刚刚的网银站点，并获取账号密码，那后果可想而知
• 因此，从安全的角度来讲，同源策略是有利于保护网站信息的。

Q:很多场景避免不了跨域访问，那么这么解决呢？

A:有以下几种方法

• CORS,跨域资源共享
  • CORS其实是浏览器指定的一个规范，浏览器会自动进行CORS通信
  • 它的实现主要在服务端，通过一些HTTP Header来限制可以访问的域
  • 例如页面A需要访问B服务器上的数据，如果B服务器上声明了允许A的域名访问，那么从A到B的跨域请求就可以完成。
• @CrossOrigin注释
  • 如果项目使用的是springboot，可以在Controller类上添加@CrossOrigin(origins=”*”)注解就可以实现对当前controller的跨域访问了
  • 当然这个标签也可以加到方法上，或者直接加到入口类上对所以接口进行跨域处理
  • 勘误: @CrossOrigin跟jdk版本无关，跟SpringMVC的版本有关。SpringMVC的版本要在4.2或以上才支持@CrossOrigin
• nginx反向代理接口跨域
  • 首先同源策略是浏览器的安全策略，不是HTTP协议的一部分
  • 服务器端调用HTTP接口只是使用HTTP协议，不会执行JS脚本，不需要同源策略，也就不存在跨域访问。
  • nginx反向代理接口实习思路如下：
    • 通过nginx配置一个代理服务器（域名与domain1相同，端口不同）做跳板机，反向代理访问domain2接口，并且可以顺便修改cookie中domain信息，方便当前域cookie写入，实现跨域登录
      这样我们的前端代理只有访问http:www.domain1.com:81/*就可以了
• 通过jsonp跨域
  • 通过为减轻web服务器的负载，我们把js,css,img等静态资源分离到另一台独立域名的服务器上
  • 在html页面中再通过相应的标签从不同域名下加载静态资源，这是浏览器允许的操作
  • 基于此原理，我们可以通过动态创建script，再请求一个带参网页实现跨域通信。

Other

• 跨域问题的本质是浏览器安全策略的拦截，即浏览器不允许你在自己的资源场景内访问其他非自己资源，所以才要页面端服务器做本地反向代理。解决办法，如果是ie浏览器，就把安全策略级别调低就行了
• springboot整合shiro项目的坑：如果用WebMvcConfigure配置跨域，shiro的拦截器会在此更早触发，导致跨域失效，推荐注入CorsFilter配置
  • 那是因为mvc本身的拦截器是在dispatch之后执行的 而shiro的拦截是基于filter的 filter发生在dispatch之前 不算坑 机制就是这样的
• 开发的过程中用的最多的就是通过本地node服务转发请求，像现在的vue cli和creat react app还有众多服务端渲染项目都是默认内置了node服务的

数据信息来源：
哔哩哔哩：什么是跨域？怎么解决？

本作品采用《CC 协议》，转载必须注明作者和本文链接