目录

vue请求后端方法及解决跨域问题

目录

vue请求后端方法及解决跨域问题

今天做项目时,有这样一个需求:从前端界面发送影视分类的分类名,从后端获取该分类下的全部视频信息并返回给前端。

鼠标点击按钮事件

https://i-blog.csdnimg.cn/blog_migrate/c23d84bb540359a80f8a7f0f1ba1c1cc.png

先简单尝试获取全部视频,测试一把

编写前端发送请求的axios

https://i-blog.csdnimg.cn/blog_migrate/79e41e68647e5bcc6c080bc474c4b2a0.png

后端的spring security 配置类和认证过滤器记得放行,因为我们不需要登录(游客身份)也能正常搜索查看影片,所以肯定是没有token的,故一律将请求路径放行

https://i-blog.csdnimg.cn/blog_migrate/0fb4fe2dd1d2901f9bee9ef625906f63.png

https://i-blog.csdnimg.cn/blog_migrate/1a0595c0e901022c655ece090ece8825.png

一切准备完毕,点击按钮后,控制台直接报错

https://i-blog.csdnimg.cn/blog_migrate/d2c3c9d3d82bc8b30e91f1d1d73ae082.png

https://i-blog.csdnimg.cn/blog_migrate/9f2589a0b1d44e0793e8f1629753c6bb.png

后端一切正常,能获取到并打印数据

https://i-blog.csdnimg.cn/blog_migrate/877fc71c6103cd49e6cb9c80fb50490a.png

一开始找不出原因,以为是axios的问题,但几经查找资料后发现应该是跨域问题,但是前端axios直接请求的是路径没有经过代理,问题不大,所以问题应该出现在后端,

然后突然想起这个是新的后端项目,没有跨域,所以应该要在对应的Controller控制器加@CrossOrigin

https://i-blog.csdnimg.cn/blog_migrate/cce2254c9945e512c40b46a9d2a8b842.png

https://i-blog.csdnimg.cn/blog_migrate/266d231af1cce2e10e23ba971b381b1c.png

需要补充的一点是,如果不使用token且请求路径带有参数(如restful风格时),则必须要把请求路径在springsecurity的配置类中 的public void configure(WebSecurity web) 方法中放行

请求播放ID时未做以上操作:

https://i-blog.csdnimg.cn/blog_migrate/6800e8e741d22c3414432e22345e4783.png

显示仍然需要token

https://i-blog.csdnimg.cn/blog_migrate/d63840536ce1e373aeb3ce59b7403445.png

在这里添加不通过token 的带参数的请求路径就好了

https://i-blog.csdnimg.cn/blog_migrate/2085e47f3ad3816207e476cb17b20ded.png