Cors跨域请求,解决方法

创建一个配置文件工具类

第一种 编写全局文件(复杂)

package com.mashibing.config;

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

/**
 * All rights Reserved, Designed By www.info4z.club
 * <p>title:com.mashibing</p>
 * <p>ClassName:Config</p>
 * <p>Description:TODO(配置全局跨域)</p>
 * <p>Compony:Info4z</p>
 * author:zhijieShen
 * date:2021/5/14
 * version:1.0
 * 注意：本内容仅限于公司内部传阅，禁止外泄以及用于其他的商业目的
 */
@Configuration
public class CorsConfig {
    private CorsConfiguration buildConfig() {
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        //  你需要跨域的地址  注意这里的 127.0.0.1 != localhost
        // * 表示对所有的地址都可以访问
        corsConfiguration.addAllowedOrigin("*");
        //  跨域的请求头
        corsConfiguration.addAllowedHeader("*"); // 2
        //  跨域的请求方法
        corsConfiguration.addAllowedMethod("*"); // 3
        //加上了这一句，大致意思是可以携带 cookie
        //最终的结果是可以 在跨域请求的时候获取同一个 session
        corsConfiguration.setAllowCredentials(true);
        return corsConfiguration;
    }
    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        //配置 可以访问的地址
        source.registerCorsConfiguration("/**", buildConfig()); // 4
        return new CorsFilter(source);
    }

}

mock:临时存储
使用同步加载依赖
防止 vuex 中的 GetInfo 早于 mock 运行，导致无法 mock 请求返回结果
判断环境不是 prod 或者 preview 是 true 时，加载 mock 服务

import { isIE } from '@/utils/util'

// 判断环境不是 prod 或者 preview 是 true 时，加载 mock 服务
if (process.env.NODE_ENV !== 'production' || process.env.VUE_APP_PREVIEW === 'true') {
  if (isIE()) {
    console.error('[antd-pro] ERROR: `mockjs` NOT SUPPORT `IE` PLEASE DO NOT USE IN `production` ENV.')
  }
  // 使用同步加载依赖
  // 防止 vuex 中的 GetInfo 早于 mock 运行，导致无法 mock 请求返回结果
  console.log('[antd-pro] mock mounting')
  const Mock = require('mockjs2')
  require('./services/auth')
  require('./services/user')
  require('./services/manage')
  require('./services/other')
  require('./services/tagCloud')
  require('./services/article')

  Mock.setup({
    timeout: 800 // setter delay time
  })
  console.log('[antd-pro] mock mounted')
}

第二种 接口注解(代码冗余)

若不用配置文件的方式也可以在controller里添加注解的形式,省略配置文件

@CrossOrigin(origins = "*",allowCredentials="true",allowedHeaders = "*",methods = {})

两者比较
配置文件:全局的,无需多余设置
注解形式:需要的每个都要设置,好处是可以设置每个具体的信息详情

因为版本升级所有可能会报错:
所以注解类设置为:@CrossOrigin(originPatterns = "*",allowCredentials="true",allowedHeaders = "*",methods = {})

由于版本升级所以,工具类要添加一行代码

 corsConfiguration.addAllowedOriginPattern(CorsConfiguration.ALL);

在后端controller里添加注解后@RestController @CrossOrigin(originPatterns = "*",allowCredentials="true",allowedHeaders = "*",methods = {})
虽然设置为true但是前端没有做修改,前端默认为false,所以要修改为axios.defaults.withCredentials = true

第三种 升级版(简单)

@Configuration
public class WebConvertConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOriginPatterns("*")
                .allowCredentials(true)
                .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
                .maxAge(3600);
    }