异常解决！前后端交互时，CORS跨域问题的解决过程

一. 前言

这两天壹哥在带徒弟进行前后端混合式App开发时，班里有些童鞋遇到了一个典型的前后端交互问题，问题如下图所示：

上图中的这个异常，其实只要是有过相关开发经验的朋友，一眼就能看出问题所在。比如壹哥一看这个问题，就知道这是因为跨域而造成的故障，我们在前端或者后端进行相关处理就可以解决了。壹哥作为一名工作十多年的Java老油条，看到这个问题随手就可以解决掉，但既然有好几个童鞋都出现了这个故障，说明这个问题还是很经典的。那么今天壹哥就专门带各位一起来分析并解决这个异常，看看为什么会出现这个问题，以及这个问题该怎么解决。

二. 异常的一般解决思路

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

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

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

接下来如果定位到了故障所在，我们就要想办法进行解决。那么问题来了，具体怎么解决呢？如果我们的异常是在前后端交互时产生的问题，可以在浏览器开启F12查看控制台，看看浏览器的控制台是否有一些明显的错误信息。学会查看错误日志是我们程序员的基本技能，如果有些异常信息看不出来，我们就需要用到另一个调试神器：Debug。小伙伴，你现在会不会使用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注解之后，从前后端项目，前端再次进行访问就可以了。此时我们分析，跨域问题已经不存在了！ 

好了，今天的问题就讲到这里，大家如果有任何问题，都可以私信壹哥，我看到后会及时回复大家！