跨域解决方案

跨域解决方案五花八门，这里记录作者常用的几种

• 跨域的本质是同源策略
• 请求到服务器了，服务器拒绝响应

文章目录

• 1. 前端跨域
• • 1.1 vue （vue-cli脚手架）
  • • 1.1.1 配置跨域
    • 1.1.2 使用
  • 1.2 react
• 2. 后端跨域（Java）
• • 2.1 配置响应CorsFilter
  • 2.2 实现 WebMvcConfigurer 接口
  • 2.3 使用注解（@CrossOrigin）

1. 前端跨域

解决方案：配置proxy代理跨域

原理：访问 localhost 请求转发到本地代理 proxy 服务器，peoxy 代理服务器通过请求转发和远程服务器进行数据交互。由于跨域只存在于 ajax（axios封装了ajax）请求中，所以proxy 代理服务器和远程服务器进行交互的时候不存在跨域问题。

请求链路：本地 <-> proxy代理服务器 <-> 远程服务器

1.1 vue （vue-cli脚手架）

1.1.1 配置跨域

// vue.config.js
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://www.edward.com:8090/', //对应自己的接口
        changeOrigin: true,
        ws: true,
        // 请求到代理服务器时，将 '/api'去掉
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}
           

1.1.2 使用

- 访问本地可用省略ip:端口（完整本地地址：http://localhost:8080/api/getDataPoint）
- /api/getDataPoint <=> http://www.edward.com:8090/getDataPoint
axios.get('/api/getDataPoint').then(res => {
  console.log(res)
})
           

1.2 react

之前笔记整理过，这里就不重复写了

配置文档：react配置proxy代理跨域

2. 后端跨域（Java）

下面几种方式本质上都是在响应头中加入参数，实现方式不同罢了

2.1 配置响应CorsFilter

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;
 
 
@Configuration
public class CorsConfig {
    private CorsConfiguration buildConfig() {
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.addAllowedOrigin("*");
        corsConfiguration.addAllowedHeader("*");
        corsConfiguration.addAllowedMethod("*");
        corsConfiguration.setMaxAge(3600L);
        corsConfiguration.setAllowCredentials(true);
        return corsConfiguration;
    }
 
    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", buildConfig());
        return new CorsFilter(source);
    }
}
           

2.2 实现 WebMvcConfigurer 接口

这是 springboot2.x 版本的用法

@Configuration
public class WebMvcConfg implements WebMvcConfigurer {
 
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        //设置允许跨域的路径
        registry.addMapping("/**")
                //设置允许跨域请求的域名
                //当**Credentials为true时，**Origin不能为星号，需为具体的ip地址【如果接口不带cookie,ip无需设成具体ip】
                .allowedOrigins("http://localhost:9527", "http://127.0.0.1:9527", "http://127.0.0.1:8082", "http://127.0.0.1:8083")
                //是否允许证书 不再默认开启
                .allowCredentials(true)
                //设置允许的方法
                .allowedMethods("*")
                //跨域允许时间
                .maxAge(3600);
    }
}
           

2.3 使用注解（@CrossOrigin）

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
 
 
@Controller
@RequestMapping("/test")
@CrossOrigin
public class TestController{
 
}