解决跨域问题

简介：
当前项目开发中，最常使用的就是前后端分离开发，所以不可避免的会遇到跨域资源访问的问题，
本文将介绍 六种 解决跨域的方案：

方法一：Spring项目（boot ,mvc)
1、使用 @CrossOrigin注解
Spring Boot 支持通过设置 CORS（跨源资源共享）来解决跨域请求问题。具体如下两个地方可以进行配置，我们选择一种即可。
（1）在请求方法上配置
我们可以直接在相应的请求方法上添加 @CrossOrigin 注解，那么该方法则支持跨域。

@RestController 
public class WebAPIController {
    
@Autowired
DeviceDataManager deviceDataManager;


		@GetMapping("/getDeviceDatas")
		@CrossOrigin
		public List<DeviceData> importTalkTestData() {
    		return deviceDataManager. importTalkTestData();
		}
}

（2）我们也可以在控制器上添加 @CrossOrigin 注解，那么该控制器下的所有方法都支持跨域。

@RestController 
@CrossOrigin 
public class WebAPIController {
	
    @Autowired
    DeviceDataManager deviceDataManager;



	@GetMapping("/importTalkTestData")
	public List<DeviceData> importTalkTestData() {
    	return deviceDataManager. importTalkTestData ();
    }
}

（3）@CrossOrigin 注解还支持更加丰富的参数配置：
value：表示支持的域。这里表示来自 http://localhost:8081 域的请求是支持跨域的。默认为 *，表示所有域都可以。

maxAge：表示探测请求的有效期（先进性判断是否有效）。探测请求不用每次都发送，可以配置一个有效期，有效期过了之后才会发送探测请求。默认为 1800 秒，即 30 分钟。

allowedHeaders：表示允许的请求头。默认为 *，表示该域中的所有的请求都被允许。

@RestController 
public class WebAPIController {
	
    @Autowired
	DeviceDataManager deviceDataManager;

	@GetMapping("/getDeviceDatas")
	@CrossOrigin(value = "http://localhost:8081", maxAge = 1800, allowedHeaders ="*")
	public List<DeviceData> getDeviceDatas() {
    	return deviceDataManager.getDatas();
    }
}

方法二：

2、response 添加 header
　　我们在 Servlet 请求返回时添加如下代码：

1 * 表示支持所有网站访问，也可以额外配置相应网站

2 resp.setHeader(“Access-Control-Allow-Origin”, “*”);

 @GetMapping("/findFiles")
    public AjaxData findFiles(String path, HttpServletResponse response) {
        List<FileVo> fileList = FileUtils.findFiles(path);
        
        //添加这句代码，解决跨域问题；
        response.setHeader("Access-Control-Allow-Origin", "*");
        
        return AjaxData.success(fileList);
    }

方法三：
基于nginx实现解决跨域问题
3、修改nginx配置文件
原理图：

利用nginx反向代理，将请求分发到部署到相应项目的tomcat服务器，当然也不存在跨域问题。

Nginx.conf修改：

 server { 
	listen       8105;
       server_name  manage2;

       #charset koi8-r;
       #access_log  logs/host.access.log  main;



       location / {
          root   /opt/admin2;

          index  index.html index.htm;

          try_files $uri $uri/ /index.html;

       }

       location /easyTalkTest {
       proxy_pass http://test.admin.langooo.com/easyTalkTest;
           
           proxy_set_header X-Real-IP $remote_addr;

           proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

           proxy_set_header Host $host;

           proxy_set_header X-NginX-Proxy true;

           proxy_set_header CAPTCHA_TOKEN $http_captcha_token;

          proxy_set_header Authorization $http_authorization;

           proxy_connect_timeout 300;

           proxy_send_timeout 300;

           proxy_read_timeout 300s;

       }

       ##error_page  404              /404.html;
       # redirect server error pages to the static page /50x.html

       #

       error_page   500 502 503 504  /50x.html;

       location = /50x.html {
          root   html;

       }

        

   }

方法四：SpringMVC项目
基于XML的配置

<mvc:cors>
    <mvc:mapping path="/**" />
</mvc:cors>

方法五：基于过滤器实现

（1）写一个过滤器：

import java.io.IOException;

import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Component;


@Component
public class CrossFilter implements Filter {
private static Logger logger = LoggerFactory.getLogger(CrossFilter.class);

@Override
public void init(FilterConfig filterConfig) throws ServletException {
}
@Override
public void destroy() {
}
@Override
public void doFilter(ServletRequest request, ServletResponse response,
FilterChain chain) throws IOException, ServletException {
logger.debug("跨域请求进来了。。。");
HttpServletRequest httpServletRequest = (HttpServletRequest) request;
httpServletRequest.getSession();
HttpServletResponse httpResponse = (HttpServletResponse) response;
httpResponse.setHeader("Access-Control-Allow-Origin", "*");
httpResponse.setHeader("Access-Control-Allow-Methods", "*");
httpResponse.setHeader("Access-Control-Max-Age", "3600");
httpResponse.setHeader("Access-Control-Allow-Headers",
"Origin, X-Requested-With, Content-Type, Accept, Connection, User-Agent, Cookie");
httpResponse.setHeader("Access-Control-Allow-Credentials", "true");
httpResponse.setHeader("Content-type", "application/json");
httpResponse.setHeader("Cache-Control", "no-cache, must-revalidate");
chain.doFilter(request, httpResponse);
}
}

在web.xml中配置过滤器和需要过滤的接口

<!-- 添加过滤器过滤跨域请求 -->
<filter>
<filter-name>cors</filter-name>
<!-- 这里配置上面刚刚设置的java过滤器文件 -->
<filter-class>com.ninesword.utils.CrossFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>cors</filter-name>
<!-- 这里配置你需要进行跨域的接口，*代表jsForSdp当前路径下所子有路径 -->
<url-pattern>/jsForSdp/*</url-pattern>
</filter-mapping>

方法六

@Configuration
public class CorsConfig {
    
    
    private CorsConfiguration buildConfig() {
      final CorsConfiguration config = new CorsConfiguration();
        config.addAllowedOrigin("*"); // 1
        config.addAllowedHeader("*"); // 2
        config.addAllowedMethod("*"); // 3 
        config.setAllowCredentials(true); //支持cookie 跨域
        return config;
    }

    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", buildConfig()); // 4
        return new CorsFilter(source);
    }
}