1.什么是跨域问题？

　　在浏览器里，为了安全着想，一般只会允许同源之间交互，同源：同一协议，同一端口号，同一域名。跨域指的就是非同源之间的访问。

　　如果你是在本地搭建的前后端分离的项目，那么就会存在这个问题。

2.跨域有哪些解决方式

　　2.1 浏览器

　　　　既然同源是因为浏览器带来的，其实只要把浏览器的安全策略关闭，那么就可以解决了，当然，这是最基本的问题

　　　　https://www.cnblogs.com/zhongxia/p/5416024.html这个博客写的很全

　　2.2 前端

　　　　前端如果你用的是Vue，那么可以通过设置代理的形式；如果你用的不是Vue，可以通过使用Nginx

　　　　在Vue的根目录下，找到Vue.config.js,输入以下代码：

module.exports = {
    //相当于webpack-dev-server,  对本地服务器进行配置
    devSever : {
         proxy:  {
            "/api" : {
                 target: " http://localhost:3000 ",   //需要跨域的目标url ,我这里是自己本地起的一个服务端口
                 changeOrigin: true,           // 将基于名称的虚拟托管网站的选项，如果不配置，请求会报404
                 ws:  true,
                 pathRewrite: {
                     " ^/api " :  ""          //若请求的路径在目标url下但不在/api 下，则将其转换成空
                 }    
            }
        }
    }     
}

 

　　　　

　　3.3 后端

　　　　后端我开发的时候用的是springboot

　　　　3.3.1 如果要细分到每个方法，推荐使用注解@Crossorigin

　　　　　　@CrossOrigin有几个主要的参数， 

　　　　　　originPatterns：源模板，默认值是*

　　　　　　allowedHeaders：允许的请求头，默认值是*

1 @CrossOrigin(originPatterns = {"*"}, allowedHeaders = "*")
2 @RestController
3 public class paperController {
4     @Value("${file.upload.abspath}")
5     private String abspath;
6     @Value("${file.upload.mdImageDir}")

 

　　　　3.3.2 实现一个配置类，需要继承于WebMvcConfigurer。@Configuration表示这是一个配置类，交给spring管理。然后需要重写父方法

 

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedHeaders("*")
                .allowedMethods("*")
                .allowedOriginPatterns("**")
                .allowCredentials(true);
    }

}