前后端分离存在跨域问题
前后端分离存在跨域问题
前后端分离
前后端分离的定义
前后端分离是一种架构模式,简单的来说就是后端项目里面看不到页面(JSP|HTML),后端给前端提供接口,前端调用后端提供的REST风格接口就行,前端专注写页面(html|jsp)和渲染(JS|CSS|各种前端框架);后端专注写代码就行。
前后端分离的核心:后台提供数据,前端负责显示
在前后端分离之前,用的都是一个端口号,不存在跨域问题;但是前后端分离之后前端有一个端口(如:8080),后端也有一个端口
(如:后端8888)
那么如何使两个不同的端口号可以访问呢:解决前后端分离的跨域问题
解决跨域问题:
第一种方式:在Controller层类上使用@CrossOrigin注解
每增加一个controller就要写一个注解
第二种方式:在controller层类上每个方法上使用@CrossOrigin注解
只要你是前后端分离,只要在controller增加一个方法就要写一个@CrossOrigin注解,这样还不如直接使用第一种方式来的实在
第三种方式:使用@Configuration注解
@Configuration定义配置类,替换xml注解 ,实现跨域,这个类要实现WebMvcConfigurer接口
package com.ityu.music.config;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.*;
/*定位各种头像、文件的地址 :静态资源映射*/
@Configuration
public class WebMvcConfig implements WebMvcConfigurer {
/*解决跨域问题*/
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")//项目中所有接口都支持跨域
.allowedOrigins("*")//前端哪些域名可以跨域(这里是全部都可以)
.allowedMethods("GET", "HEAD", "POST", "PUT", "DELETE", "OPTIONS")//允许所有请求方式
.allowCredentials(true)//自己的的项目需要带cookie凭证
.maxAge(3600)//跨域允许时间
.allowedHeaders("*");//请求信息所有
}
//定位歌手头像地址
/*添加静态文件映射 addResourceHandlers*/
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
//对歌手头像地址的映射
registry.addResourceHandler("/img/singerPic/**").addResourceLocations(
"file:"+System.getProperty("user.dir")+System.getProperty("file.separator")+"img"+
System.getProperty("file.separator")+"singerPic"+System.getProperty("file.separator")
);
//对歌曲图片地址的映射
registry.addResourceHandler("/img/songPic/**").addResourceLocations(
"file:"+System.getProperty("user.dir")+System.getProperty("file.separator")+"img"+
System.getProperty("file.separator")+"songPic"+System.getProperty("file.separator")
);
//对歌单图片地址的映射
registry.addResourceHandler("/img/songList/**").addResourceLocations("img/songList/**");
//歌曲地址
registry.addResourceHandler("/song/**").addResourceLocations("/song/**");
}
//自定义视图解析器:前端输入
@Override
public void addViewControllers(ViewControllerRegistry registry) {
registry.addViewController("/Login").setViewName("/");
}
}
版权声明:本文为weixin_43347737原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。