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);
}