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

野性酷女 2023-09-27 10:19 5阅读 0赞

#### 文章目录 ####

*  为何会出现跨域？
 *  解决跨域方案

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

![在这里插入图片描述][5405342e9cb3470aba3544492605d05b.png]  
![在这里插入图片描述][5c0f89dd17444ed1ba9e0d8f43aad7b0.png]

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

## 为何会出现跨域？ ##

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

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

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

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

以上图举个例子：

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

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

## 解决跨域方案 ##

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

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

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

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

![在这里插入图片描述][4e85f86457564923931af0b29757c909.png]

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

[5405342e9cb3470aba3544492605d05b.png]: https://img-blog.csdnimg.cn/5405342e9cb3470aba3544492605d05b.png
[5c0f89dd17444ed1ba9e0d8f43aad7b0.png]: https://img-blog.csdnimg.cn/5c0f89dd17444ed1ba9e0d8f43aad7b0.png
[4184edc9cac5427dbf224abf4c3681e9.png]: https://img-blog.csdnimg.cn/4184edc9cac5427dbf224abf4c3681e9.png
[4e85f86457564923931af0b29757c909.png]: https://img-blog.csdnimg.cn/4e85f86457564923931af0b29757c909.png