CORS Nginx webpack解决跨域

解决跨域的方案常见的有 CORS、Nginx、webpack
CORS是纯后端解决
webpack是纯前端解决
Nginx和webpack都是通过搭建一个中转服务器来转发请求规避跨域

三种方式都挺常用的

CORS解决跨域

CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。

1：@CrossOrigin注解
贴在controller类上，该类中的所有方法都可跨域访问

2：配置类配置跨域

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 GlobalCorsConfig {
    @Bean
    public CorsFilter corsFilter() {
        //1.添加CORS配置信息
        CorsConfiguration config = new CorsConfiguration();
        //1) 允许的域,不要写*，否则cookie就无法使用了
        config.addAllowedOrigin("http://manage.leyou.com");
        //2) 是否发送Cookie信息
        config.setAllowCredentials(true);
        //3) 允许的请求方式
        config.addAllowedMethod("OPTIONS");
        config.addAllowedMethod("HEAD");
        config.addAllowedMethod("GET");
        config.addAllowedMethod("PUT");
        config.addAllowedMethod("POST");
        config.addAllowedMethod("DELETE");
        config.addAllowedMethod("PATCH");
        // 4）允许的头信息
        config.addAllowedHeader("*");

        //2.添加映射路径，我们拦截一切请求
        UrlBasedCorsConfigurationSource configSource = new UrlBasedCorsConfigurationSource();
        configSource.registerCorsConfiguration("/**", config);

        //3.返回新的CorsFilter.
        return new CorsFilter(configSource);
    }
}

使用CORS解决跨域会出现一个问题：重复请求
每一次请求，浏览器必须先以 OPTIONS 请求方式发送一个预请求（也不是所有请求都会发送 options，简单请求不用，详情见下方博客），通过预检请求从而获知服务器端对跨源请求支持的 HTTP 方法。在确认服务器允许该跨源请求的情况下，再以实际的 HTTP 请求方法发送那个真正的请求。

CORS内部机制见：阮一峰博客

Nginx解决跨域

直接贴一段代码吧，Nginx也不是很熟
nginx.conf文件

worker_processes  1;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    server {
        listen       70;
        server_name  localhost;

        location / {
            root   html;
            index  index.html index.htm;
        }

        location /static {
            proxy_pass http://localhost:70;   #前端地址
        }

        location /post {
            proxy_pass http://47.111.224.5:9000;  #后端地址，需要用post打头，可以自己设置
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}

webpack

https://blog.csdn.net/mjzhang1993/article/details/72833847