推荐几种解决跨域问题的方法

什么是跨域

跨域，指的是浏览器不能执行其他网站的脚本。它是由*浏览器的同源策略造成的，是浏览器施加的安全限制。

实例

http://www.baidu.com/index.html 调用 http://www.baidu.com/server.php （非跨域）

http://www.baidu.com/index.html 调用 http://www.sina.com/server.php （主域名不同:baidu/sina，跨域）

http://abc.baidu.com/index.html 调用 http://def.baidu.com/server.php （子域名不同:abc/def，跨域）

http://www.baidu.com:8080/index.html 调用 http://www.baidu.com:8081/server.php （端口不同:8080/8081，跨域）

http://www.baidu.com/index.html 调用 https://www.baidu.com/server.php （协议不同:http/https，跨域）

请注意：localhost和127.0.0.1虽然都指向本机，但也属于跨域。

如何解决跨域

1.传统问题解决跨域

JSONP只支持GET请求，不支持POST请求。

$.ajax({
url: “你的url”,
type: ‘GET’,
dataType: ‘JSONP’,//重点在这里，加上这个属性就可以跨域请求了
success: function (data) {
}
});

2.springboot,springclound解决跨域

在springboot或springclound中增加如下字段：

在这里插入代码片
@Configuration
public class CorsConfig {
    private CorsConfiguration buildConfig() {
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.addAllowedOrigin("*"); //允许任何域名
        corsConfiguration.addAllowedHeader("*"); //允许任何头
        corsConfiguration.addAllowedMethod("*"); //允许任何方法
        return corsConfiguration;
    }
 
    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", buildConfig()); //注册
        return new CorsFilter(source);

3.代理模式解决（nginx）

location / {
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Methods ‘GET, POST, OPTIONS’;
add_header Access-Control-Allow-Headers ‘DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization’;

if ($request_method = 'OPTIONS') {
    return 204;
}

}

4.springmvc 解决方案

在某个方法上实现跨域请求：

@RequestMapping("/crossDomain2")
@ResponseBody
@CrossOrigin
public String crossDomain2(HttpServletRequest req, HttpServletResponse res, String name){
……
……
}

5.使用过滤器

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);
    }
}

本质上注解的方式底层也是对应的过滤器实现的，先记着，原理性的东西，以后讨论~

参考和推荐阅读：

1. 跨域相关.

2. 跨域五种解决方案.