【前后端分离项目中解决跨域问题】

前提

• 前端使用的开发工具是VScode ，使用的是Vue进行开发前端
• 后端使用的开发工具是IDEA，使用的是SpringBoot进行开发后端
• 本文只从后端的角度来解决跨域问题

什么是跨域问题

因为浏览器有一个同源机制，只有同源的地址可以进行数据交互，这个是浏览器的安全机制

• 什么是同源？
• 只要两个地址中的协议，主机号，端口号都一致才算同源，只要有一个不一致就不是同源的
• 比如：
  spring boot的项目启动地址： http://localhost:8080/ssm/users
  Vue项目的启动地址：http://localhost:8081/
  这两个地址中的访问端口号不一致，所以无法进行数据交互。

从后端角度的解决办法：

• 以下方法使用一种即可，最好不要同时多种存在。

方法1（亲测有效）

创建一个配置类，实现WebMvcConfigurer接口 ，并重写里面的addCorsMappings()方法 ，这个配置类一般是通用的，可以直接复制使用即可
注意：该类最好放在springboot主启动类所在包下或者其子包下，这样才可以扫描到配置类中的注解，才能生效！！！

package com.example.config;

import org.springframework.context.annotation.Configuration;

import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class WebMvcConfig implements WebMvcConfigurer {
  @Override
  public void addCorsMappings(CorsRegistry registry) {
      registry.addMapping("/**")
              .allowedOrigins("*")
              .allowedHeaders("*")
              .allowedMethods("GET", "POST", "PUT", "OPTIONS", "DELETE", "PATCH")
              .maxAge(3600);
  }
}

方法2

在控制器方法上加上注解@CrossOrigin ，此时该方法就支持跨域访问了
缺点：如果控制器中方法很多，需要每个方法都加上@CrossOrigin注解，比较麻烦

   //查询一个用户
    @CrossOrigin  //加上该注解则该方法就支持跨域访问了
    @GetMapping("/{id}")
    public Result searchOneUser(@PathVariable String id){
        Result result = new Result(200,userServiceImpl.query(id));
        return result;
    }

方法3

创建一个配置类，在该配置类中创建一个CorsFilter过滤器对象，该对象会对请求的url进行过滤配置。也可以直接复制过去进行使用

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;
import org.springframework.web.cors.CorsConfiguration;

@Configuration
public class config {

    @Bean
    public CorsFilter corsFilter(){
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.addAllowedOrigin("*");
        corsConfiguration.addAllowedHeader("*");
        corsConfiguration.addAllowedMethod("*");
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**",corsConfiguration);
        return new CorsFilter(source);
    }
}