SpringBoot + Vue前后端分离开发的跨域问题

缺乏、安全感 2023-10-06 20:29 4阅读 0赞

## SpringBoot + Vue前后端分离开发的跨域问题 ##

#### 文章目录 ####

*  SpringBoot + Vue前后端分离开发的跨域问题
 *   *   *  一个因跨域问题报错的例子
         *  跨域问题与浏览器的同源策略
         *  如何解决跨域问题
         *   *  后端来解决
             *  前端来解决

#### 一个因跨域问题报错的例子 ####

我们以一个简单的springboot + vue前后端分离小例子来引入跨域问题，我们要从前端输入一个字符串，然后通过ajax发送请求将这个字符串传给后端，由后端接收并打印出来  
  这个例子十分简单，我们直接上代码：  
  后端：

@RestController
    @RequestMapping("/data")
    public class GetAndPrintData {
        
    
        @PostMapping("/put/string")
        public void getAndPrintString(@RequestBody StringData stringData) {
        
            System.out.println(stringData.getStringData());
        }
    }

@Data
    public class StringData {
        
        private String stringData;
    }

前端：

<template>
      <div>
        <el-form ref="dataForm" :model="dataForm" label-width="80px" class="login-box">
          <h3 class="login-title">来传输数据</h3>
          <el-form-item label="字符串数据" prop="stringData">
            <el-input type="text" placeholder="请输入字符串信息" v-model="dataForm.stringData"/>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" v-on:click="onSubmit()">传输数据</el-button>
          </el-form-item>
        </el-form>
      </div>
    </template>
    
    <script>
    export default {
        
      name: "CrosTest",
      data() {
        
        return {
        
          dataForm: {
        
            stringData: ''
          },
        }
      },
      methods: {
        
        onSubmit() {
        
          axios({
        
            method: 'POST',
            url: 'http://localhost:8181/data/put/string',
            data: this.dataForm
          })
        }
      }
    }
    </script>
    
    <style scoped>
    
    </style>

这里要注意的点是前端传的JSON中的key要和后端实体类中的属性对应，后端实体类属性为stringData，前端传的JSON中的key也要为stringData，若为stringdata，则对应不上，后端将接收不到相应数据

我们启动前后端后，输入字符串并提交，发现前端报错，后端没有接收到数据  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5bCP54G15a6d_size_20_color_FFFFFF_t_70_g_se_x_16]  
  来看看具体的报错信息：  
`Access to XMLHttpRequest at 'http://localhost:8181/data/put/string' from origin 'http://localhost:8081' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.`  
  它说我们的http请求被CORS policy给blocked了，那么什么是CORS policy呢？接下来我们就来谈谈跨域问题

#### 跨域问题与浏览器的同源策略 ####

什么是跨域呢？浏览器从一个域名的网页去请求另一个域名的资源时，域名、端口、协议任一不同，都是跨域。在我们的前后端分离开发中，首先，前后端端口就一定不同，也就是说，前端发请求到后端一定是跨域。与跨域相对的概念就是同源，两个页面地址中的协议，域名，端口号一致，则表示同源。  
  浏览器采用了同源策略。同源策略保证了以下3点：  
  1、无法读取非同源网页的 Cookie、LocalStorage 和 IndexedDB  
  2、无法接触非同源网页的 DOM（HTML DOM 定义了用于 HTML 的一系列标准的对象，以及访问和处理 HTML 文档的标准方法）  
  3、无法成功向非同源地址发送 AJAX 请求（可以发送，但浏览器会拒绝接受响应）  
  为什么浏览器要采取同源策略呢？主要是为了保证安全，如果没有同源限制存在，浏览器中的cookie等其他数据可以任意读取，不同域下DOM任意操作，ajax任意请求的话，如果浏览了恶意网站那么就会泄漏这些隐私数据，恶意程序也能给别的网站疯狂进行ajax请求。  
  我们之前的例子就是因为向非同源地址发送了ajax请求，被浏览器的同源策略拒绝了

#### 如何解决跨域问题 ####

##### 后端来解决 #####

既然无法成功向非同源地址发送 AJAX 请求，那有没有出现什么方法来解决这个问题呢，毕竟我们是要经常发送跨域请求的。W3C制定了一个标准CORS，全称是"跨域资源共享"（Cross-origin resource sharing）。它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。  
  CORS需要浏览器和服务器同时支持，浏览器这端完全不用担心，目前的浏览器一般没有不支持的。整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。这就是后端的任务了。  
  这种方法是跨源 AJAX 请求的根本解决方法。  
  因此，我们只要让后端实现CORS接口就好了，CORS接口的具体细节可以参考：[跨域资源共享 CORS 详解][CORS]。

我们使用@Configuration注解创建一个配置类，该配置类需实现WebMvcConfigurer接口，这里提供两种方式来进行配置：  
  方法1：配置类里面使用@Bean标注在构造器方法上用以注入一个CorsFilter对象，此方法适用于配置类需要进行很多配置的场合，推荐使用，下面上代码：

import org.springframework.context.annotation.Bean;
    import org.springframework.context.annotation.Configuration;
    import org.springframework.web.cors.CorsConfiguration;
    import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
    import org.springframework.web.filter.CorsFilter;
    import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
    
    @Configuration
    public class Configurer implements WebMvcConfigurer {
        
        @Bean
        public CorsFilter corsFilter() {
        
            UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
            CorsConfiguration config = new CorsConfiguration();
            config.setAllowCredentials(true);   // 可选字段，表示是否允许发送Cookie,true表示允许
            config.addAllowedOrigin("http://localhost:8081");   // 必填字段，"*"表示接受任意域名的请求
            config.addAllowedHeader("*");   // 可选字段，允许CORS请求额外发送的头信息字段
            config.addAllowedMethod("*");   // 必填字段，允许CORS请求使用的HTTP方法, "*"表示全部方法
            config.setMaxAge(3600L);    // 可选字段，用来指定预检请求的有效期，单位为秒。在有效期间，不用发出另一条预检请求
            source.registerCorsConfiguration("/**", config);    // 必填字段，"/**"表示请求路径是多级，"/*/*"表示请求路径是两级
            return new CorsFilter(source);
        }
    }

方法2：配置类重写addCorsMappings方法，若该配置类只负责CORS配置，则可使用此方法：

import org.springframework.context.annotation.Configuration;
    import org.springframework.web.servlet.config.annotation.CorsRegistry;
    import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
    
    @Configuration
    public class Configurer implements WebMvcConfigurer {
        
    
        @Override
        public void addCorsMappings(CorsRegistry registry) {
        
            registry.addMapping("/**")  // 必填字段，"/**"表示请求路径是多级，"/*/*"表示请求路径是两级
                    .allowedOriginPatterns("http://localhost:8081")     // 必填字段，"*"表示接受任意域名的请求
                    .allowedMethods("GET", "HEAD", "POST", "PUT", "DELETE", "OPTIONS")  // 必填字段，允许CORS请求使用的HTTP方法, "*"表示全部方法
                    .allowCredentials(true)     // 可选字段，表示是否允许发送Cookie,true表示允许
                    .maxAge(3600)   // 可选字段，用来指定预检请求的有效期，单位为秒。在有效期间，不用发出另一条预检请求
                    .allowedHeaders("*");   // 可选字段，允许CORS请求额外发送的头信息字段
        }
    }

这里对上述代码解释一下，Origin字段在CORS中用来说明，本次请求来自哪个源（协议 + 域名 + 端口）。服务器根据这个值，决定是否同意这次请求。我们在配置中设置了`allowCredentials(true)`，表示允许发送Cookie，此时`allowedOriginPatterns`就不能设为星号，必须指定明确的、与请求网页一致的域名。同时，Cookie依然遵循同源政策，只有用服务器域名设置的Cookie才会上传，其他域名的Cookie并不会上传，且（跨源）原网页代码中的document.cookie也无法读取服务器域名下的Cookie，这也是为了安全考虑，因此我们将允许的OriginPatterns设为前端域名`http://localhost:8081`。同时由于Cookie的收发前后端都要参与，必须在AJAX请求中打开withCredentials属性，我们要在vue项目的main.js中加上这样一句配置：`axios.defaults.withCredentials=true;`  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5bCP54G15a6d_size_19_color_FFFFFF_t_70_g_se_x_16]  
  不加上这句配置，即使服务器同意发送Cookie，浏览器也不会发送。或者，服务器要求设置Cookie，浏览器也不会处理。  
  下面我们来测试一下：

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5bCP54G15a6d_size_20_color_FFFFFF_t_70_g_se_x_16 1]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5bCP54G15a6d_size_20_color_FFFFFF_t_70_g_se_x_16 2]  
  成功解决了跨域问题

##### 前端来解决 #####

前端来解决跨域问题有几种方法：  
  1、使用WebSocket通信协议，这里不详解。该协议不实行同源政策，只要服务器支持，就可以通过它进行跨源通信。  
  2、中间代理服务转发：在前端服务和后端接口服务之间架设一个中间代理服务，它的地址保持和后端服务器一致，这样，我们就可以通过中间服务做接口转发，在开发环境下解决跨域问题。我们需要vue.config.js中配置代理服务，通过这个代理服务发送请求，由于代理服务和后端端口号相同，这样就不存在跨域的问题了，代码如下：

'use strict'
    module.exports = {
        
        dev: {
        
            host: 'localhost',
            port: 8081,
            autoOpenBrowser: false,
            overlay: {
        
                warnings: false,
                errors: true
            },
            // 代理配置
            proxy: {
        
                // 如果请求地址以/data打头,就触发代理机制
                // http://localhost:8081/data/put/string -> http://localhost:8181/data/put/string
                '/data': {
        
                    target: 'http://localhost:8181',//后端接口地址
                    changeOrigin: true,//是否允许更改Origin
                    pathRewrite: {
        
                        '^/data': '/data',//重写,
                    }
                }
            },
        },
    }

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5bCP54G15a6d_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/e71e69b06e6d46daaeab5f9074ee6ead.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5bCP54G15a6d,size_20,color_FFFFFF,t_70,g_se,x_16
[CORS]: http://www.ruanyifeng.com/blog/2016/04/cors.html
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5bCP54G15a6d_size_19_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/cb89c02285254a929fa7a97db1bdbbfc.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5bCP54G15a6d,size_19,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5bCP54G15a6d_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/96b61dce65024a90aa796a8aa6114601.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5bCP54G15a6d,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5bCP54G15a6d_size_20_color_FFFFFF_t_70_g_se_x_16 2]: https://img-blog.csdnimg.cn/ce486974b08e4a4c90832701eb748c6c.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5bCP54G15a6d,size_20,color_FFFFFF,t_70,g_se,x_16