Java - 探究前后分离带来的跨域问题

清疚 2022-10-29 10:21 142阅读 0赞

### 文章目录 ###

*  为什么会产生跨域问题
 *  同源策略 （Same-origin policy）
 *  解决方案
 *   *  服务端解决方案
     *   *  简单请求
         *  复杂请求
         *  测试
         *   *  简单请求测试
             *  复杂请求测试
     *  代理服务器，反向代理接口请求
     *  jsonp 方式

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdzaGFuZ3dlaQ_size_16_color_FFFFFF_t_70]

--------------------

# 为什么会产生跨域问题 #

1995年，Netscape 公司出于安全的考虑在浏览器中引入了“同源策略”。

跨域问题只出现在浏览器访问的页面，因为这是浏览器为了保户用户安全而制造的策略。假如没有这层保护，网站就很容易受到跨站伪造请求（CSRF）的攻击。

![在这里插入图片描述][2021021215081536.png]

--------------------

# 同源策略 （Same-origin policy） #

浏览器端对请求的处理中，如果两个 URL 的协议、域名和端口都相同，我们就称这两个URL 同源

我们来举几个例子

同源

http://www.xxxx.com/index
      http://www.xxxx.com/module/path1

非同源

http://www.xxxx.com/index
     https://www.xxxx.com/module/path1

http://www.xxxx.com/index
     http://www.yyyy.com/module/path1

http://www.xxxx.com/index
     http://www.xxxx.com:8081/module/path1

--------------------

两个相同的源之间浏览器默认其是可以相互访问资源和操作 DOM 的。两个不同的源之间若想要相互访问资源或者操作 DOM，那么会有一套基础的安全策略的制约。

*  安全性： 浏览器要防止当前站点的私密数据不会向其他站点发送

> 如当前站点的Cookie,LocalStorage,IndexDb 不会被发送到其他站点或被其他站点脚本读取到。  
> 无法跨域获取Dom，无法发送Ajax请求。

*  可用性：大型站点的图片，音视频等资源，希望部署在独立服务器上，为缓解当前服务的压力，开放某些特定的方式，访问非同源站点

> 如：`<script><img><iframe><link><vedio>`等，可以同src属性跨域访问 允许跨域提交表单/或重定向请求

![在这里插入图片描述][20210212203316712.gif_pic_center]

--------------------

# 解决方案 #

## 服务端解决方案 ##

跨域请求分两种情况

### 简单请求 ###

1.  请求方法使用GET/HEAD/POST请求之一
2.  仅能使用CORS安全的头部，Accept,Accept-Language, Content-Language,Content-Type
3.  Content-Type的值只能是：text/plain,multipart/form-data,application/x-www-form-urlencoded三者其中之一

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdzaGFuZ3dlaQ_size_16_color_FFFFFF_t_70 1]

请求从domain a 发过来， 请求到web domain b , 如果这个时候domain b 返回一个允许，可以解决这个问题。

服务端解决方案： 在http响应头中添加 Access-Control-Allow-Origin 头，值为信任的站点

![在这里插入图片描述][20210212150547141.png]

--------------------

### 复杂请求 ###

**不符合简单请求条件的即为复杂请求，访问跨域资源前，需要发起preflight预检请求（OPTIONS请求）询问何种请求是被允许的，预检请求失败，则不会发起正式的业务请求，预检请求成功，然后发起正式请求。**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdzaGFuZ3dlaQ_size_16_color_FFFFFF_t_70 2]  
![在这里插入图片描述][20210212201823212.png]

--------------------

### 测试 ###

随便写个spring boot 的工程，启动2个端口 一个8080 一个8081 ，访问8080的页面，调用8081的后台服务 ， 用来测试

![在这里插入图片描述][20210212151644403.png]

#### 简单请求测试 ####

来看第一个

CASE1: 【GET请求】  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdzaGFuZ3dlaQ_size_16_color_FFFFFF_t_70 3]

点击访问

![在这里插入图片描述][20210212152126329.png]

服务端后台的代码  
![在这里插入图片描述][20210212152324227.png]

添加

response.addHeader("Access-Control-Allow_origin","http://localhost:8080");

重启后， 重新测试

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdzaGFuZ3dlaQ_size_16_color_FFFFFF_t_70 4]

--------------------

CASE2: 【表单请求】  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdzaGFuZ3dlaQ_size_16_color_FFFFFF_t_70 5]

目前的后端代码

![在这里插入图片描述][20210212153406864.png]

来 测试走一波

![在这里插入图片描述][20210212153610921.png]

![不给面子。。。。][20210212153634386.png]

![在这里插入图片描述][20210212153524315.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdzaGFuZ3dlaQ_size_16_color_FFFFFF_t_70 6]

重启重新测试 ， OK

--------------------

#### 复杂请求测试 ####

【复杂请求】  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdzaGFuZ3dlaQ_size_16_color_FFFFFF_t_70 7]

**和上面Case2的请求一模一样，除了 Content-Type , 那 还能用上面的添加响应头解决吗？  
答案是不能的。。。。。**

我们用wireshark来跟踪下 option 预检的 请求

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdzaGFuZ3dlaQ_size_16_color_FFFFFF_t_70 8]

Spring Boot 官方给出了解决方案

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdzaGFuZ3dlaQ_size_16_color_FFFFFF_t_70 9]

我们就看全局的这个配置吧

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdzaGFuZ3dlaQ_size_16_color_FFFFFF_t_70 10]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdzaGFuZ3dlaQ_size_16_color_FFFFFF_t_70 11]

请求下 跟踪下

![在这里插入图片描述][20210212201037384.png]

good

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdzaGFuZ3dlaQ_size_16_color_FFFFFF_t_70 12]

--------------------

## 代理服务器，反向代理接口请求 ##

location /api { 
       rewrite ^/api/(.*)$ /$1 break;
       proxy_pass http://localhost:8081/;
     }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdzaGFuZ3dlaQ_size_16_color_FFFFFF_t_70 13]

**说一下为什要rewrite， 因为 api 这个前缀仅仅用于前台页面发请求时候携带， 后台并没有 api这个context， 所以需要在nnginx 通过rewrite机制来将api 替换掉 。**

rewrite ^/api/(.*)$ /$1 break;

这个就是 一 /api开头的请求， 替换为 $1 ， 这个$1就是 请求中/api后面的内容， break 即为 匹配到则不往后面找了。

![在这里插入图片描述][20210212201750254.png]

--------------------

## jsonp 方式 ##

基于

可用性：大型站点的图片，音视频等资源，希望部署在独立服务器上，为缓解当前服务的压力，开放某些特定的方式，访问非同源站点 。

如：`<script><img><iframe><link><vedio>`等，可以同src属性跨域访问 允许跨域提交表单/或重定向请求

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdzaGFuZ3dlaQ_size_16_color_FFFFFF_t_70 14]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdzaGFuZ3dlaQ_size_16_color_FFFFFF_t_70 15]

后台代码

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdzaGFuZ3dlaQ_size_16_color_FFFFFF_t_70 16]

测试走一波

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdzaGFuZ3dlaQ_size_16_color_FFFFFF_t_70 17]

**了解下就行了，实际中很少会用到jsonp来解决跨域问题**

![在这里插入图片描述][20210212202642412.png]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdzaGFuZ3dlaQ_size_16_color_FFFFFF_t_70]: /images/20221024/1b4859d3334e41da93c70e85cb5b8d0a.png
[2021021215081536.png]: /images/20221024/1baf58b07cb94778a3b90aa81df431ea.png
[20210212203316712.gif_pic_center]: /images/20221024/221b2db7282a431b9027cb72cdf3f408.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdzaGFuZ3dlaQ_size_16_color_FFFFFF_t_70 1]: /images/20221024/0e936fed20414e68bb582c2aa24cb6ff.png
[20210212150547141.png]: /images/20221024/23e8b1d199694193855d1c1b760d2989.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdzaGFuZ3dlaQ_size_16_color_FFFFFF_t_70 2]: /images/20221024/fbe37abee4ba45979865d1a3f0cbfc00.png
[20210212201823212.png]: /images/20221024/41094f9a6dc84242b5264ebd7c887de3.png
[20210212151644403.png]: /images/20221024/3a67e0cb5dbc4190bbef9757c4afbef5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdzaGFuZ3dlaQ_size_16_color_FFFFFF_t_70 3]: /images/20221024/08ad620bf74c4a46bd4652fe48bebecd.png
[20210212152126329.png]: /images/20221024/cc7826314f934f9db8ad8735d307eceb.png
[20210212152324227.png]: /images/20221024/bb4efaf36d1846a59265fdb34f0d5d57.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdzaGFuZ3dlaQ_size_16_color_FFFFFF_t_70 4]: /images/20221024/9fe4581fb5724ba2badc914fbc6af4a8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdzaGFuZ3dlaQ_size_16_color_FFFFFF_t_70 5]: /images/20221024/479b1aaefe7b485cb4e1b7c4d6fb4338.png
[20210212153406864.png]: /images/20221024/872c68cc17854d59add7c3aedd241222.png
[20210212153610921.png]: /images/20221024/2cc628cf2e1b4e28a95cf9058f6b9acc.png
[20210212153634386.png]: /images/20221024/695e02b52dec4cc7905fa3f75bd63bda.png
[20210212153524315.png]: /images/20221024/edc5c0abea0841f8bc34804502e34114.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdzaGFuZ3dlaQ_size_16_color_FFFFFF_t_70 6]: /images/20221024/0232575f7a9c4ba6ac1f2a23f4f7e952.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdzaGFuZ3dlaQ_size_16_color_FFFFFF_t_70 7]: /images/20221024/7988a5d1c68944cbaa39de23adcef3d4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdzaGFuZ3dlaQ_size_16_color_FFFFFF_t_70 8]: /images/20221024/f384e99ef2bf42de85708d54ea661c9e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdzaGFuZ3dlaQ_size_16_color_FFFFFF_t_70 9]: /images/20221024/a97aa7fc98be44768ca83f4a30e6a69a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdzaGFuZ3dlaQ_size_16_color_FFFFFF_t_70 10]: /images/20221024/cf049a0824d844de98e2c1e7e87cd596.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdzaGFuZ3dlaQ_size_16_color_FFFFFF_t_70 11]: /images/20221024/588867122d664c93b0148d62d28d1950.png
[20210212201037384.png]: /images/20221024/4aa2b89848184f1faa580f73c49432af.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdzaGFuZ3dlaQ_size_16_color_FFFFFF_t_70 12]: /images/20221024/7cf34cef23264543a08c4791df4f70fc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdzaGFuZ3dlaQ_size_16_color_FFFFFF_t_70 13]: /images/20221024/320ada7ed82d445eb686b2c851cee2b2.png
[20210212201750254.png]: /images/20221024/5513431c552d42f28bfce58b6cbcfaef.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdzaGFuZ3dlaQ_size_16_color_FFFFFF_t_70 14]: /images/20221024/c04d9a98e1fb45d6b7192a3c8e768cdf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdzaGFuZ3dlaQ_size_16_color_FFFFFF_t_70 15]: /images/20221024/d425f64f312341c38931809f1cc85550.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdzaGFuZ3dlaQ_size_16_color_FFFFFF_t_70 16]: /images/20221024/c25914a1444f4c0baa65e75e41a7a0c0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdzaGFuZ3dlaQ_size_16_color_FFFFFF_t_70 17]: /images/20221024/9bec07866d3b4146adacee00ea1109c9.png
[20210212202642412.png]: /images/20221024/0d1c227c098541acbd8dc5e8411955bb.png