跨域处理

产生原因

跨域产生的原因是由于前端地址与后台接口不是同源，从而导致 ajax 不能发送

非同源产生的问题

1. Cookie、LocalStorage 和 IndexDB 无法获取
2. DOM 无法获得
3. AJAX 请求不能发送

同源条件

协议，端口，主机 三者相同即为同源

反之，其中只要 某一个 不一样则为不同源

解决方式

本地开发跨域

本地开发一般使用下面 3 种方式进行处理

1. vue前端的proxy 进行代理
2. 后台开启 cors
3. 使用 nginx 转发请求

生产环境跨域

生产环境一般使用下面 2 种方式进行处理

1. 后台开启 cors (以java为例)

   @Configuration
   @RequiredArgsConstructor
   public class CorsConfig implements WebMvcConfigurer {
   
       /**
        * 开启跨域
        */
       @Override
       public void addCorsMappings(CorsRegistry registry) {
           // 设置允许跨域的路由
           registry.addMapping("/**")
                   // 设置允许跨域请求的域名
                   //.allowedOriginPatterns("*")
                   .allowedOrigins("*")
                   // 是否允许证书（cookies）
                   .allowCredentials(true)
                   // 设置允许的方法
                   .allowedMethods("*")
                   // 跨域允许时间
                   .maxAge(3600);
       }
   }

2. 使用 nginx 转发请求

   例如：/api 代理至本机的1170端口

   location /api
   {
       proxy_pass http://127.0.0.1:1170/;
       proxy_set_header Host $host;
       proxy_set_header X-Real-IP $remote_addr;
       proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
       proxy_set_header REMOTE-HOST $remote_addr;
       add_header X-Cache $upstream_cache_status;
   
       #Set Nginx Cache
       add_header Cache-Control no-cache;
       expires 12h;
   }