记一次Ajax跨域请求出错

不念不忘少年蓝@ 2023-10-04 12:21 116阅读 0赞

## ERROR ##

Access to XMLHttpRequest at 'http://localhost:8080/Ajax\_war\_exploded/queryServlet?sno=789' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. localhost:8080/Ajax\_war\_exploded/queryServlet?sno=789:1

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1ExMzY4MDg5MzIz_size_16_color_FFFFFF_t_70]

## HTML ##

<html>
    <head>
        <title>Title</title>
    </head>
    <body>
    <form>
        <span>学号：</span><input type="text" id="sno" name="sno"/>
        <input type="button" id="btn" value="查询"/>
    </form>
    <div id="res"></div>
    </body>
    <script type="text/javascript">
        function GetXmlHttpObject() {
         
            var XMLHttp=null;
            try{
          XMLHttp=new XMLHttpRequest(); }
            catch(e){
          try{
          XMLHttp=new ActiveXObject("Msxml2.XMLHTTP"); }
            catch(e){
          XMLHttp=new ActiveXObject("Microsoft.XMLHTTP"); }
            }
            return XMLHttp;
        }
    
        function requestFun(){
         
           var XMLHttp=GetXmlHttpObject();
    
           var sno=document.getElementById("sno").value;
           var url="http://localhost:8080/Ajax_war_exploded/queryServlet?sno="+sno;                       //添加动态前缀
           //var postStr="sno="+sno;
    
           XMLHttp.open("GET",url,true);
          // XMLHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");    //设置头信息
          // XMLHttp.send(postStr);                                                           //向服务器发送HTTP请求(内容-参数)
     XMLHttp.send();   
           XMLHttp.onreadystatechange=function(){
                                                    //定义响应处理函数
               // document.getElementById("res").innerText=XMLHttp.responseText;
               document.getElementById("res").innerText=this.responseText;
           }
    
        }
    
        document.getElementById("btn").onclick=requestFun;
    
    </script>
    </html>

## 解决方法： ##

> 问题描述：Access to XMLHttpRequest at ‘url’ from origin ‘null’ has been  
> blocked by CORS policy: Request header field content-type is not  
> allowed by Access-Control-Allow-Headers in preflight response.  
> 具体原因：Request header field content-type is not allowed by  
> Access-Control-Allow-Headers in preflight response

预运行响应中的访问控制允许头不允许请求头字段内容类型，也就是我们的请求head中包含了不允许的字段内容。

原因：  
包含自定义header字段的跨域请求，浏览器会先向服务器发送OPTIONS请求，探测该服务器是否允许自定义的跨域字段。如果允许，则继续实际的POST／GET正常请求，否则，返回标题所示错误。  
看看请求：

Access-Control-Request-Headers: content-type  
Access-Control-Request-Method: POST  
Origin: null  
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36

找到了！Access-Control-Request-Headers: content-type 中包含了content-type这个字段。

找到了不包含的字段，那么只需要在系统的过滤器（filter）中设置响应头包含该字段即可。  
解决：

package servlet;
    
    import javax.servlet.ServletException;
    import javax.servlet.annotation.WebServlet;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import java.io.IOException;
    
    @WebServlet(name = "QueryServlet",urlPatterns = {
        "/queryServlet"})
    public class QueryServlet extends HttpServlet {
        
        protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        
    
            request.setCharacterEncoding("UTF-8");
            response.setCharacterEncoding("utf-8");
            response.setContentType("text/html;charset=utf-8");
    
            //跨域请求，*代表允许全部类型
            response.setHeader("Access-Control-Allow-Origin", "*");
            //允许请求方式
            response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
            //用来指定本次预检请求的有效期，单位为秒，在此期间不用发出另一条预检请求
            response.setHeader("Access-Control-Max-Age", "3600");
            //请求包含的字段内容，如有多个可用哪个逗号分隔如下
            response.setHeader("Access-Control-Allow-Headers", "content-type,x-requested-with,Authorization, x-ui-request,lang");
            //访问控制允许凭据，true为允许
            response.setHeader("Access-Control-Allow-Credentials", "true");
    
            String sno = request.getParameter("sno");
            String res = "hello," + sno;
            System.out.println(sno);
            if (sno != null) {
        
                response.getWriter().write(res);
            } else
                response.getWriter().write("学号为空");
        }
    
    
        protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        
            doPost(request, response);
        }
    }

解决方法参考：https://blog.csdn.net/zhangcc233/article/details/86627384

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1ExMzY4MDg5MzIz_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210501205137956.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1ExMzY4MDg5MzIz,size_16,color_FFFFFF,t_70