最近使用spring cloud框架进行前后端分离开发，因为我们是通过网关去访问后台接口,ip
、端口都相同，所以没有出现过跨域问题，但是前端的同事把项目用webstrom打开以后(端口和ip就成了webstrom分配的)就有了跨域问题无法请求到后台，浏览器报"CORS 头缺少 'Access-Control-Allow-Origin'"，但是我们已经在网关里设置了Access-Control-Allow-Origin为*，代码如下：

@Service
public class AuthFilter extends ZuulFilter {
    /**
     * 日志对象
     */
    private static final Logger logger = LoggerFactory.getLogger(AuthFilter.class);
    @Autowired
    private FilterConfig filterConfig;
    /**
     * redis缓存
     */
    @Autowired
    private RedisService redisService;
    @Override
    public boolean shouldFilter() {
        return true;
    }

    @Override
    public Object run() {
        RequestContext ctx = RequestContext.getCurrentContext();
        HttpServletRequest request = ctx.getRequest();
        HttpServletResponse response = ctx.getResponse();
        //解决浏览器跨域问题
        response.addHeader("Access-Control-Allow-Origin", "*");
        response.setContentType("application/json");
        response.setCharacterEncoding("UTF-8");
        response.setContentType("text/html;charset=UTF-8");
//        response.addHeader("Access-Control-Allow-Credentials", "true");
//        response.addHeader("Access-Control-Allow-Methods", "GET, HEAD, POST, PUT, DELETE, OPTIONS, PATCH");
//        response.addHeader("Access-Control-Max-Age", "3600");
//        response.addHeader("Vary", "Origin");
        response.addHeader("Access-Control-Allow-Headers", "token,accesstoken,Content-type");
        //请求接口URL时登录token有效性校验
        return null;
    }

    @Override
    public String filterType() {
        return "pre";
    }

    @Override
    public int filterOrder() {
        return 0;
    }

}

对此我在本地随便写了个小项目还原了当时的情景，我把代码以及报错贴出来麻烦各位看一下哪里有不对的；
前端代码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="js/jquery-1.9.1.min.js"></script>
    </head>
    <script>
        function t1(){
            $.ajax({
                url:'http://localhost:9001/xzw/say',
                type:'post',
                contentType : 'application/json;charset=utf-8', 
                dataType:'json',
                data : JSON.stringify({
                    batch_id : 'ncveirugheasolvgil'
                }),
                success : function(data){
                    alert('成功跨域');
                    alert(data);
                },
                error : function(){
                    alert('error');
                }
            })
        }
    </script>
    <body>
        <input type="button" value="测试跨域是否能获取数据" onclick="t1()"/>
    </body>
</html>

后台代码:

@RestController
@RequestMapping("/xzw")
public class PageDemoController {
    @RequestMapping("/say")
    public String say(HttpServletRequest request,HttpServletResponse response,@RequestParam(value="batch_id")String batch_id){
        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.addHeader("Access-Control-Allow-Headers", "*");
        System.out.println("batch_id="+batch_id);


        return "hello world";
    }
}

浏览器报错

已拦截跨源请求：同源策略禁止读取位于 http://localhost:9001/xzw/say 的远程资源。（原因：CORS 头缺少 'Access-Control-Allow-Origin'）。[详细了解]

已拦截跨源请求：同源策略禁止读取位于 http://localhost:9001/xzw/say 的远程资源。（原因：CORS 请求未能成功）。[详细了解]

我们项目里的拦截器原本除了设置Access-Control-Allow-Origin还有验证token的代码，前端如果先进行登陆然后在ajax请求的时候把token拿到放在header里就不会有跨域问题，我把token验证的代码去掉了就出现了跨域问题，但是我看验证token的逻辑判断对跨域没有什么特殊的处理，一下为拦截器原代码:

public Object run() {
        RequestContext ctx = RequestContext.getCurrentContext();
        HttpServletRequest request = ctx.getRequest();
        HttpServletResponse response = ctx.getResponse();
        //解决浏览器跨域问题
        response.addHeader("Access-Control-Allow-Origin", "*");
        response.setContentType("application/json");
        response.setCharacterEncoding("UTF-8");
        response.setContentType("text/html;charset=UTF-8");
//        response.addHeader("Access-Control-Allow-Credentials", "true");
//        response.addHeader("Access-Control-Allow-Methods", "GET, HEAD, POST, PUT, DELETE, OPTIONS, PATCH");
//        response.addHeader("Access-Control-Max-Age", "3600");
//        response.addHeader("Vary", "Origin");
        response.addHeader("Access-Control-Allow-Headers", "token,accesstoken,Content-type");
        //请求接口URL时登录token有效性校验
        Object token = request.getHeader("token");
        if(token==null||token.equals("")) {
            token = null;
        }
        boolean flag = false;//请求路径是否在过滤范围标识
        if ("OPTIONS".equalsIgnoreCase(request.getMethod())) {
            ctx.setSendZuulResponse(false);
            return null;
        }
        String ignores = filterConfig.getIgnores();
        if(!StringUtilHelper.isEmpty(ignores)) {
            String[] ignores_arr = ignores.split(",");
            for(String ignore:ignores_arr) {
                if(request.getRequestURI().toString().contains(ignore)) {
                    //无需token校验
                    flag = true;
                    break;
                }
            }
        }
        logger.info("网关日志：method={}, uri={},result={},token={}",request.getMethod(), request.getRequestURI(), (true==flag?"无需token校验":"需要token校验"),token);
        if(!flag) {
            //需要校验token有效性
            if(token==null) {
                ctx.setSendZuulResponse(false);
                ctx.setResponseStatusCode(HttpServletResponse.SC_UNAUTHORIZED);
                ctx.setResponseBody("token为空，未认证用户");
                return null;
            } else {
                //redis校验
                if(redisService.check(token.toString())!=ServiceConstants.STATE_1) {
                    ctx.setSendZuulResponse(false);
                    ctx.setResponseStatusCode(HttpServletResponse.SC_UNAUTHORIZED);
                    ctx.setResponseBody("token超时，请重新登录");
                    return null;
                }
            }
        }
        return null;
    }

Ajax跨域请求被拦截（CORS请求未成功）

rjx贤

3个回复