前后端交互过程中跨域问题的解决思路

　　一. 前言

　　这两天小编带学生们进行前后端混合式App开发时，班级里有一些童鞋遇到了一个很典型的前后端交互的问题这个异常，其实只要是有过相关开发经验的，一眼就能看出问题所在。比如小编一看这个问题，就知道这是因为跨域而造成的故障，我们在前端或者后端做一下处理就可以解决了。小编作为一名工作十多年的职场老油条，看到这个问题随手就可以解决掉，但既然有好几个童鞋都出现了这个故障，说明这个问题还是很经典的。那么今天就专门来带各位一起分析并解决这个，我们来看看为什么会出现这个问题，以及这个问题该怎么解决?

　　二. 日常异常的解决思路

　　在分析今天的异常之前，先给大家讲讲，如果我们遇到一般的异常，到底该怎么解决?所谓授之以鱼，不如授之以渔，所以辉哥在授课的过程中，始终认为教会学生正确的学习方法更重要。

　　如果我们在开发中遇到一般的异常问题，到底该怎么办?首先不要慌!我们要搞清楚到底产生了什么异常?如果你连是什么异常都不知道，那就没了解决的方向。这就好比有敌人来攻击你，你首先要搞清楚到底是哪个敌人，这样心里才能做到大致有数。

　　知道是什么异常之后，就要想办法对异常进行定位，找到出现问题的具体地方。这是很重要的一点，我们得知道哪里出现了故障，这样才能在繁多的代码中缩小范围，尽快地找到故障的真正原因。

　　接下来如果定位到了故障所在，我们就要想办法进行解决。那么问题来了，具体怎么解决呢?如果我们的异常是在前后端交互时产生的问题，可以在浏览器开启F12查看控制台，看看浏览器的控制台是否有一些明显的错误信息。学会查看错误日志是我们程序员的基本技能，如果有些异常信息看不出来，我们就需要用到另一个调试神器：Debug。小伙伴，你现在会不会使用Debug呢?

　　只要我们能够发现问题的原因和所在，解决起来就容易的多了!剩下的就是仔细思考，到底是自己的什么操作引起这个问题?什么条件触发了这个问题?最后你会发现，解决异常并没有那么难!

　　所以以后我们再遇到异常，常规的解决思路就是”明确异常，定位异常，分析异常，排除异常“这样的四部曲!

　　还要顺带说一句，在我们日常的学习过程中，请先尽量自己想办法解决问题，能自己解决是最好的，因为这样你对问题的理解和记忆就会更深刻。当然，如果是在企业里，项目急着上线等情况，遇到问题一时搞不定，那就别自己死磕了，赶紧摇人是正经。

　　说完了一般异常的常规解决思路，接下来再结合今天的具体异常，给大家说说具体的解决过程。

　　三. 跨域问题的解决过程

　　3.1 明确异常

　　我们现在编写的项目是一个前后端联合项目，浏览器的控制台首先出现了如下异常信息：

　　从上图中，我们通过仔细地阅读异常信息，发现了异常的关键信息：CORS policy:No ‘Access-Controller-Allow-Origin’等内容。如果你之前从来没有遇到过这个异常，没关系，那就问度娘好了，度娘会告诉你，这是跨域问题!所以我们此时就知道了，原来我们的项目产生了跨域问题!这里根据控制台的提示信息，我们看到是不允许跨域访问，如下图所示：

　　那么到底是哪里产生了跨域呢?我们继续往下分析!

　　3.2 定位异常

　　仔细分析上图的异常信息，我们可以发现，跨域问题是发生在请求checkphone接口时产生的。但我们打开后端项目的控制台，却发现后端接口并没有报错。

　　3.3 分析异常

　　那么到底为什么会出现这个问题呢?我们以前都没有遇到，现在就突然遇到了。如果你仔细查阅”跨域访问“的相关内容，就会知道，这是因为浏览器默认就有一个”同源策略“，即浏览器默认只允许同一个网站访问，不允许不同的网站访问。这里我们看看页面和对应的接口，如下图所示：

　　这里我们页面的访问地址是：http://xxx:8080/login，接口的访问地址：http://xxx8082/xxxxx，这里两个地址的端口号一个是8080，一个是8082，在同源策略下，这属于2个完全不同的网站!也就是说，我们的前端项目和后端项目，是2个不同的网站!浏览器不允许从前端这个网站直接访问后端那个网站里的接口!

　　再解释一下什么是同源策略：在一个网址中，只有请求协议、IP地址和端口号这3个一样才叫同源，只要有一个不同就不是同源!另外同源策略只针对Ajax、Axios、Fetch有效。

　　所以我们这个问题明显就是非同源，但现在我就要跨域访问怎么办呢?这个异常到底该怎么解决呢?

　　3.4 解决异常

　　其实解决跨域的方法有很多种，比如jsonp、cors、过滤器等，解决思路主要是通过设置响应消息头，设置允许跨域等。

　　给大家介绍一个比较简单的后端解决方法，我们可以在后端代码中直接使用一个@CrossOrigin注解，修饰对应的类或者方法就可以搞定，代码如下：

　　在后端的Controller代码中添加了@CrossOrigin注解之后，从前后端项目，前端再次进行访问就可以了。此时我们分析，跨域问题已经不存在了!

上一篇

Maven集成 tomcat插件及使用教程

下一篇

什么是深浅拷贝？