Vue整合SpringBoot项目实战之解决前后端分离的跨域问题

野性酷女 2023-03-01 09:49 5阅读 0赞

# Vue整合SpringBoot项目实战之前后端分离的数据交互 #

**系列文章**：

1.  [Vue整合SpringBoot项目实战之Vue+Element-Ui搭建前端项目][Vue_SpringBoot_Vue_Element-Ui]
2.  [Vue整合SpringBoot项目实战之后端业务处理][Vue_SpringBoot]
3.  [Vue整合SpringBoot项目实战之动态路由处理][Vue_SpringBoot 1]
4.  [Vue整合SpringBoot项目实战之Vue+SpringBoot][Vue_SpringBoot_Vue_SpringBoot]
5.  [Vue整合SpringBoot项目实战之Element-ui组件][Vue_SpringBoot_Element-ui]

实现前后端分离之后，由于前后端项目运行的端口号不同，所以会出现跨域问题。

## 什么是跨域？ ##

当一个请求url的**协议、域名、端口**三者之间任意一个与当前页面url不同即为跨域。

<table> 
 <thead> 
  <tr> 
   <th><strong>当前页面url</strong></th> 
   <th><strong>被请求页面url</strong></th> 
   <th><strong>是否跨域</strong></th> 
   <th align="center"><strong>原因</strong></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>http://www.test.com/</td> 
   <td>http://www.test.com/index.html</td> 
   <td>否</td> 
   <td align="center">同源（协议、域名、端口号相同）</td> 
  </tr> 
  <tr> 
   <td>http://www.test.com/</td> 
   <td>https://www.test.com/index.html</td> 
   <td>跨域</td> 
   <td align="center">协议不同（http/https）</td> 
  </tr> 
  <tr> 
   <td>http://www.test.com/</td> 
   <td>http://www.baidu.com/</td> 
   <td>跨域</td> 
   <td align="center">主域名不同（test/baidu）</td> 
  </tr> 
  <tr> 
   <td>http://www.test.com/</td> 
   <td>http://blog.test.com/</td> 
   <td>跨域</td> 
   <td align="center">子域名不同（www/blog）</td> 
  </tr> 
  <tr> 
   <td>http://www.test.com:8080/</td> 
   <td>http://www.test.com:7001/</td> 
   <td>跨域</td> 
   <td align="center">端口号不同（8080/7001）</td> 
  </tr> 
 </tbody> 
</table>

## 解决方法 ##

### axios-基于 promise 的 HTTP 客户端 ###

实现前后端分离的关键：使用axios去请求后端

`vue add axios`

### axios请求 ###

*  axios.get get请求；
 *  axios.put put请求；
 *  axios.post post请求 ；
 *  axios.delete请求；

例：

前端的axios请求API

axios
                .put("http://localhost:8181/student/upd", this.ruleForm)
                .then(function(resp) { 
                  //回调函数
                });

Java解决跨域：

package com.vuespringboot.demo.config;
    
    import org.springframework.context.annotation.Configuration;
    import org.springframework.web.servlet.config.annotation.CorsRegistry;
    import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
    
    /** * @author Cody * @date 2020/7/17 - 14:08 */
    @Configuration
    public class CrosConfig implements WebMvcConfigurer { 
        @Override
        public void addCorsMappings(CorsRegistry registry) { 
            registry.addMapping("/**")
                    .allowedOrigins("*")
                    .allowedMethods("GET", "HEAD", "POST", "PUT", "DELETE")
                    .allowCredentials(true)
                    .maxAge(3600)
                    .allowedHeaders("*");
        }
    }

但是**使用此方法配置之后再使用自定义拦截器时跨域相关配置就会失效**。  
原因是请求经过的先后顺序问题，当请求到来时会先进入拦截器中，而不是进入Mapping映射中，所以返回的头信息中并没有配置的跨域信息。浏览器就会报跨域异常。

正确的解决跨域问题的方法时使用CorsFilter过滤器。代码如下：

private CorsConfiguration corsConfig() { 
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        * 请求常用的三种配置，*代表允许所有，当时你也可以自定义属性（比如header只能带什么，只能是post方式等等）
        */
        corsConfiguration.addAllowedOrigin("*");
        corsConfiguration.addAllowedHeader("*");
        corsConfiguration.addAllowedMethod("*");
        corsConfiguration.setAllowCredentials(true);
        corsConfiguration.setMaxAge(3600L);
        return corsConfiguration;
    }
    @Bean
    public CorsFilter corsFilter() { 
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", corsConfig());
        return new CorsFilter(source);
    }

[Vue_SpringBoot_Vue_Element-Ui]: https://blog.csdn.net/qq_45077173/article/details/107546781
[Vue_SpringBoot]: https://blog.csdn.net/qq_45077173/article/details/107546914
[Vue_SpringBoot 1]: https://blog.csdn.net/qq_45077173/article/details/107546832
[Vue_SpringBoot_Vue_SpringBoot]: https://blog.csdn.net/qq_45077173/article/details/107546812
[Vue_SpringBoot_Element-ui]: https://blog.csdn.net/qq_45077173/article/details/107546764