前端对接springboot框架开发接口出现跨域解决方案（简单有效）

近期采用前后端分离开发一个项目，后端使用springboot框架，前端对接后端接口时候出现跨域问题，如下图所示：

从上图浏览器控制台中，可以发现了异常的提示信息：CORS policy:No ‘Access-Controller-Allow-Origin’等内容，该报错的异常正是因为跨域而造成的故障。

为何会出现跨域？

先来了解下什么是”同源“？

同源:协议，域名，端口都相同的则是同源，其中一个不同则都不属于同源。

浏览器默认就有一个”同源策略“，”同源策略“是指啥？

浏览器的同源策略是指：js脚本在未经允许的情况下，不能够访问其他域下的内容。

以上图举个例子：

前面页面的访问地址是：xxxx/register.html，接口的访问地址：http://192.168.1.101/api/register，这里两个地址的域名、端口都不一致，在浏览器的同源策略下，这属于2个完全不同的网站！即前端项目和后端项目是2个不同的网站！

根据同源策略限制，浏览器不允许从前端这个网站直接访问后端那个网站里的接口。

解决跨域方案

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

如果后端使用springboot框架，可以直接使用一个@CrossOrigin注解，修饰对应的类或者方法就可以搞定，如下：

@RestController
@RequestMapping("/api")
@CrossOrigin
public class WebController extends BaseController {

}

配置后再次在浏览器请求接口，再无跨域报错了：

此方法简单又方便，强烈推荐！！