不知不觉，这个项目已经做了两个月整了，一路走来，不懂的有许多，学会的也许多，认识的大佬也挺多。
这是我接触的第一个真正意义上的完全前后端分离的，分布式的，且基于SpringCloud的项目，我是眼看着这个庞大的系统一步一步从无到有搭建出来的，40多人两个月的努力终于使项目进入了尾声，感慨万千呐。在完成工作之余，我也尝试着搭建了一个后端分布式项目，以及一个vue前端项目。写了一些基本功能吧，最重要的一步就是进行前后端的整合了，毕竟这也是一个完全前后端分离的项目了。在整合过程中，遇见了第一个拦路虎，那就是跨域问题。
1、什么是跨域问题？
出现跨域问题，在浏览器的检查中会提示如下错误：
言归正传，所谓跨域，就是说发起请求的url与所请求的url不同源，如上图中可以看到，发起请求的url（也就是前端项目）为：http://localhost:8081
而所请求的url（后端接口地址）为：http://localhost:8080
两个地址比较一下，发现只有端口号不同。
回到前面的问题，什么叫同源，什么叫不同源？
同源：也就是说两个url的协议，域名，端口号都完全相同，同源的两个url相互访问时不会产生跨域问题
不同源：也就是说两个url的协议，域名，端口号中有任意一个不相同，那么两个url就是不同源的，会产生跨域问题。
所以一言以蔽之，跨域就是：一次请求的两个url中，
协议，域名，端口号有任意一个不相同，就是跨域请求。
如何解决跨域问题？
1.如果是部分接口允许跨域，可以如下配置：
①如果是某个接口需要跨域
在接口上方加@CrossOrigin注解，如下
@CrossOrigin(origins = "http://localhost:8081", maxAge = 3600)
@GetMapping("/selectOne/{id}")
public Product selectOne(@PathVariable("id") Long id) {
return this.productService.queryById(id);
}
②如果是某个类需要跨域
在类上方加@CrossOrigin注解，如下
@CrossOrigin(origins = "http://localhost:8081", maxAge = 3600)
@RestController
@RequestMapping("/product")
public class ProductController {
2.如果是要全局配置跨域，实现Filter
package cn.ycl.product.config;
import org.springframework.stereotype.Component;
import javax.servlet.*;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
/**
* @author ycl
*/
@Component
public class SimpleCORSFilter implements Filter {
public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
HttpServletResponse response = (HttpServletResponse) res;
response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE, HEAD");
response.setHeader("Access-Control-Max-Age", "3600");
response.setHeader("Access-Control-Allow-Headers", "access-control-allow-origin, " +
"authority, content-type, version-info, X-Requested-With");
chain.doFilter(req, res);
}
public void init(FilterConfig filterConfig) {}
public void destroy() {}
}
3.如果是要全局配置跨域，继承WebMvcConfigurerAdapter
package cn.ycl.product.config;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;
/**
* @author ycl
*/
@Configuration
public class CorsConfig extends WebMvcConfigurerAdapter {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("*")
.allowCredentials(true)
.allowedMethods("GET", "POST", "DELETE", "PUT")
.maxAge(3600);
}
}
以上三种方法，都可以实现跨域（亲测有用），第二种方法和第三种方法都是只需要将类文件放在与controller包同层的config包中即可（额，至少我是这样，放其他地方也许也可以，没有尝试过），如下图
以下是题外话，各位可以忽略
题外话：其实我还是挺兴奋的吧，毕竟是完全靠我自己瞎捉摸，把简单的前后端的项目都搭建起来了，并且能够初步整合，前端项目能够调用后端项目的接口。
之前在我看来，将前端，后端的项目整合起来应该是会极其困难的，是需要非常高深的技术的，但是实际实践起来，发现并不需要太过于高深的技术，只是对于第一次搭建的没有概念的新手来说，还是挺难的。
其实我主要是之前只是粗浅的学习了一下vue，并且看的教程也是用非vue脚手架创建的前端项目，导致这次用脚手架创建的前端vue项目的各个文件的作用都不知道，看着那几十个文件夹和文件，完全一脸迷茫。连请求流程都不了解。。。
我连如何接收后台返回的数据都不知道，并且用element-ui对后台返回的数据的遍历也不会。。。
只能边搭建，边学习吧，后面的博客可能会讲到vue的一些知识和感悟吧，为自己，也为大家。
------我是“道祖且长”，一个在互联网苟且偷生的Java程序员
