跨域场景及解决方案

一、什么是跨域？

     请求不同协议、域名、端口的行为，就是跨域

二、跨域的解决方案

       常见解决方案：Nginx代理实现不跨域，配置支持跨域

        1、Nginx代理

         通过监听一个端口，不同路径来实现对不同微服务跨域访问，大致配置如下：

server {
        listen       80; #监听80端口，可以改成其他端口
        server_name  localhost; # 当前服务的域名
        #charset koi8-r;
        #access_log  logs/host.access.log  main;
        location / {
            proxy_pass http://localhost:81;
            proxy_redirect default;
        }
		location /apis { #添加访问目录为/apis的代理配置
			rewrite  ^/apis/(.*)$ /$1 break;
			proxy_pass   http://localhost:82;
       }

 

           2、代码中配置，支持跨域

           实现WebMvcConfigurerAdapter接口的addCorsMappings方法即可，代码如下：

@Configuration
public class WebConfig extends WebMvcConfigurerAdapter {
	
	@Override
	public void addCorsMappings(CorsRegistry registry) {
		registry.addMapping("/**")
				.allowedMethods(HttpMethod.GET.name(), HttpMethod.POST.name(), HttpMethod.PUT.name(),
						HttpMethod.PATCH.name(), HttpMethod.DELETE.name(),HttpMethod.OPTIONS.name()) // 允许访问方法类型
		.allowCredentials(true)
		.maxAge(3600) .allowedHeaders("Content-Type", "X-Requested-With", "accept", "Origin", "Access-Control-Request-Method",
                "Access-Control-Request-Headers","Access-Control-Allow-Headers","token")
        .exposedHeaders("Access-Control-Allow-Origin", "Access-Control-Allow-Credentials","Access-Control-Request-Headers","Access-Control-Allow-Headers","token");
	}
}