前后端分离存在跨域问题

前后端分离

前后端分离的定义

前后端分离是一种架构模式,简单的来说就是后端项目里面看不到页面(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 版权协议,转载请附上原文出处链接和本声明。
THE END
< <上一篇
下一篇>>