常用的跨域问题解决方式

引自: https://www.cnblogs.com/mmzs/p/9167743.html

解决途径：

• ​ 在前端解决
• ​ 在后端解决

一、后端解决跨域的常见方式

1、使用@CrossOrigin注解

@CrossOrigin注解有2个参数：

​ origins ： 允许可访问的域列表

​ maxAge：准备响应前的缓存持续的最大时间（以秒为单位）。

可以放在类上，也可以放在方法上。

@CrossOrigin(maxAge = 3600)
@RestController
@RequestMapping("/account")
public class AccountController {

    @CrossOrigin(origins = "http://domain2.com")
    @GetMapping("/{id}")
    public Account retrieve(@PathVariable Long id) {
        // ...
    }

    @DeleteMapping("/{id}")
    public void remove(@PathVariable Long id) {
        // ...
    }
}

2、直接在项目中增加配置类。

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class CrosConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")   
            .allowedOrigins("*")   
            .allowedMethods("GET", "HEAD", "POST", "PUT", "DELETE", "OPTIONS")
            .allowCredentials(true)
            .maxAge(3600)
            .allowedHeaders("*");
    }
}

3、配置一个CorsFilter的bean并注册到spring容器中

@Configuration
public class CrosConfig {

    @Bean
    public CorsFilter corsFilter() {
        CorsConfiguration config = new CorsConfiguration();
        //是否允许请求带有验证信息,比如token之类的
        config.setAllowCredentials(true);
        //允许访问的客户端域名
        config.addAllowedOrigin("*");
        //允许客户端请求时携带header信息
        config.addAllowedHeader("*");
        //允许请求时的方法类型
        config.addAllowedMethod("*");
        UrlBasedCorsConfigurationSource urlConfig = new UrlBasedCorsConfigurationSource();
        urlConfig.registerCorsConfiguration("/**", config);
        return new CorsFilter(urlConfig);
    }
}

二、前端解决跨域的常见方式

1、使用Nginx做为反向代理

server {
		#监听的请求server地址，也可以是localhost
        server_name www.congge.com;
		
		#允许跨域请求的域
        add_header 'Access-Control-Allow-Origin' *;
        #允许带上cookie请求
        add_header 'Access-Control-Allow-Allow-Credentials' 'true';
        #允许请求的方法 GET/POST/PUT 等
        add_header 'Access-Control-Allow-Methods' *;
        #允许请求的header
        add_header 'Access-Control-Allow-Headers' *;

        location /city/ {
            proxy_pass http://127.0.0.1:8048/;
        }
}

2、使用JSONP