ajax 请求后台跨域

坑爹的问题

最近在项目中遇到一个跨域问题,坑了好久,查阅了很多资料终于解决了,特此记录。

问题描述

前端库我这边用的axios。后台是java。前台请求方法是post。token验证放在header里面传到后台。
前端代码如下:


axios.defaults.baseURL = getAppParams().host;
axios.defaults.headers.common['token'] = getAppParams().token;

axios({
        method: "post",
        url: 'order/ordcustomer/save',
        data: formdata,
        transformRequest: [function(data) {
            return JSON.stringify(data)
        }]
    })
    .then(res => {
        console.log(res);
    })
    .catch(err => {
        console.log(err)
    })

浏览器会提示这样:Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed

一些概念

一番查询后发现。当后台设置Content-Type:application/json的时候,前端请求为post的时候,即为复杂请求。这时候,浏览器一次post请求会变成两次。
1. 第一次浏览器会优先发送一个options给后台,后台验证通过
2. 开始发送真正的post请求
关于预检的概念网上有很多,我这边就不记录了。传送门

解决方法

这个问题还是得从后台解决。 这是后台的修改代码。
后台框架shiro
servlet filter部分

    @Override
    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
            throws IOException, ServletException {
        // TODO Auto-generated method stub
        HttpServletResponse resp = (HttpServletResponse) response;
        HttpServletRequest rep = (HttpServletRequest) request;

        resp.addHeader("Access-Control-Allow-Origin",rep.getHeader("Origin"));
        //允许跨域请求中携带cookie       
        resp.addHeader("Access-Control-Allow-Credentials", "true");
        // 如果存在自定义的header参数,需要在此处添加,逗号分隔
        resp.addHeader("Access-Control-Allow-Headers", "authorization,Origin, No-Cache, X-Requested-With, "
                + "If-Modified-Since, Pragma, Last-Modified, Cache-Control, Expires, " + "Content-Type, X-E4M-With");
        resp.addHeader("Access-Control-Allow-Methods", "GET, POST, OPTIONS");

        chain.doFilter(request, response);
    }

好多网上推荐的是,将resp.addHeader("Access-Control-Allow-Origin",*);因为这边已经设置了Access-Control-Allow-Credentials:true,所以前端跨域的时候时候会带上cookie。这样在请求的时候就会产生冲突。所以一定要将Access-Control-Allow-Origin设置成rep.getHeader("Origin")!!! 传送门

还有一个细节就是,后台还要判断一下获取的请求,判断此次是否是预检请求(即getHeader()=="OPTIONS"),如果相同则 return true允许跨域;预检后,正式请求。

  if (((HttpServletRequest) request).getMethod().equals("OPTIONS")){
            return true;
        } else{
            //。。。。。。。。。。。。。
        }
发布了46 篇原创文章 · 获赞 31 · 访问量 15万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 终极编程指南 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览