记一次Ajax跨域请求出错

最新推荐文章于 2024-06-03 14:03:09 发布

智能云

最新推荐文章于 2024-06-03 14:03:09 发布

阅读量511

点赞数

分类专栏： Java Web 文章标签： ajax跨域问题

本文链接：https://blog.csdn.net/Q1368089323/article/details/116333156

版权

Java Web 专栏收录该内容

31 篇文章 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

在这里插入图片描述

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

智能云

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
记一次Ajax跨域请求出错

ERRORAccess 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_expl
复制链接

扫一扫

专栏目录