前端对接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 {
    
    

}

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

在这里插入图片描述

此方法简单又方便,强烈推荐!!

猜你喜欢

转载自blog.csdn.net/weixin_43423484/article/details/126919961