ajax请求的重定向处理--Request header field x-requested-with is not allowed by Access-Control-Allow-Header

需求

前端ajax发起请求，在后端接口中重定向，结果报错，无法跳转

• 前端页面发起调用
  

• 后端接口中重定向
  

• 控制台报错如下

• 将ajax访问的接口直接在浏览器地址栏中访问测试，发现请求内容与ajax请求的区别如下图
  

• 原因：
  X-Requested-With: XMLHttpRequest 表示是ajax的异步请求，而ajax的异步请求不能直接重定向，所以需要特殊处理一下

解决方案

前端处理

• 自己创建redirect.js，文件内容如下

function  redirectHandle(xhr) {
    var url = xhr.getResponseHeader("redirectUrl");
    var enable = xhr.getResponseHeader("enableRedirect");
    
    if((enable == "true") && (url != "")){
        var win = window;
        while(win != win.top){
            win = win.top;
        }
        win.location.href = url;
    }
}

$(function () {
    $(document).ajaxComplete(function (event, xhr, settings) {
        console.log("ajaxComplete  adffdafadsaf")
        redirectHandle(xhr);
    })
})

• 在页面中引用该js

<script src="/static/redirect.js"></script>

然后再次使用 ajax请求，就会自动走redirect.js中的重定向判断了

后端也要处理

• 如果是前后端不分离项目，注意配置mvc静态资源路劲

spring:
  mvc:
    static-path-pattern: /static/**    # 静态资源的请求还是会走过滤器、拦截器，然后直接返回该资源

• 添加工具类

使用RedirectUtil#redirect方法进行重定向处理

package com.hx.myoauthclient.utils;

import lombok.extern.slf4j.Slf4j;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

/**
 * @ClassName RedirectUtil
 * @Description //TODO
 * @Author WHX
 * @Date 2022/4/15 17:11
 **/
@Slf4j
public class RedirectUtil {

    public static void redirect(HttpServletRequest request, HttpServletResponse response, String url) {
        try{
            String header = request.getHeader("X-Requested-With");
            if("XMLHttpRequest".equals(header)){
                //如果是Ajax请求
                sendRedirect(response,url);
            } else {
                response.sendRedirect(url);
            }
        }
        catch(Exception ex){
            ex.printStackTrace();
        }
    }

    private static void sendRedirect(HttpServletResponse response, String url){
        try {
            // 写入响应头，然后前端去判断  enableRedirect=true则进行跳转
            response.setHeader("redirectUrl", url);
            response.setHeader("enableRedirect","true");
            response.flushBuffer();
        } catch (IOException ex) {
            log.error("Could not redirect to: " + url, ex);
        }
    }
}