跨域问题浅析

背景：

​ 今天与前端臭妹妹前后端连调时，偶遇到这个错误，百度求解之，乃为跨域问题

一、什么是跨域？

1. 跨域指的是浏览器不能执行其它网站的脚本，它是由浏览器的同源策略造成的，是浏览器对JavaScript 施加的安全限制。

2. 同源策略又是什么呢？

   • 协议、域名、端口号都相同，只要有一个不相同，那么都是非同源。

   

   浏览器在执行脚本的时候，都会检查这个脚本属于哪个页面，即检查是否同源，只有同源的脚本才会被执行；而非同源的脚本在请求数据的时候，浏览器会报一个异常，提示拒绝访问。

3. 同源策略的限制情况

• Cookie、LocalStorage 和 indexDB 无法读取

• Dom 和 js 对象无法获得

• Ajax 请求不能发送 （即我今天遇到的问题）

  特例：

  • 对于像 img、iframe、script 等标签的 src 属性是特例，它们是可以访问非同源网站的资源的

二、举例以示之

即此时客户端1 访问tomcat2 项目，通过ajax请求 tomcat1的资源 即是出现了浏览器跨域问题！

三、四法解之

• response 添加 header
• JSONP
• httpClient 请求转发
• Nginx 转发

3.1 response 添加 header

​ 这是网上，最为常见的方法了，即是在响应头中，设置允许不同源访问，例如

• 这样虽然是解决了跨域问题，但会导致一个新的安全问题 CSRF攻击

3.2 JSONP

​ 具体实现方法，就不在此赘述了，写一下其大体实现原理：

• 因为之前提过像 img、iframe、script 等标签的 src 属性是特例，它们是可以访问非同源网站的资源的
• 故可以通过将请求伪装为了一个

3.3 httpClient 请求转发

​ 具体实现方法，就不在此赘述了，写一下其大体实现原理：

• 这个应该，都很容易想到，

• 同源策略是浏览器实现的一个策略，所以我们就通过服务器后台去访问资源，又没有服务器的同源策略。

• 落地一点解释就是：

  ​ 在后台代码中，去访问某资源，得到资源，然后再把资源传给前端，即绕过了浏览器的同源策略

3.4 Nginx转发

​ 在后台代码中，去访问某资源，得到资源，然后再把资源传给前端，即绕过了浏览器的同源策略

3.4 Nginx转发

利用nginx反向代理，将请求分发到部署到相应项目的tomcat服务器，当然也不存在跨域问题。