• 解决 js ajax跨域访问报“No 'Access-Control-Allow-Origin' header is present on the requested resource.”错误


    默认情况下是不允许跨域代用的。
    什么是Access-Control-Allow-Origin
    Access-Control-Allow-Origin是HTML5中定义的一种服务器端返回Response header,用来解决资源(比如字体)的跨域权限问题。
    它定义了该资源允许被哪个域引用,或者被所有域引用(google字体使用*表示字体资源允许被所有域引用)。
     
    由此可见,相同域必须满足协议相同、端口相同、域名相同. 只要其中一点不满足那就是跨域。
    无论ajax是GET请求还是POST请求,Request Method都是OPTIONS。
    mui ajax真机模拟不存在跨域问题,url的访问地址要是公网地址或与真机相连接的局域网地址(在手机浏览器上能够访问服务器的资源)。
    jquery ajax的跨域问题常见的解决方法是jsonp
    $.ajax('http://192.168.1.107:8080/test/test.do';,{
                                 data:{
                                      username:username,
                                      password1:password1
                                 },
                                 
                                 dataType:'jsonp',//服务器返回json格式数据
                                 crossDomain: true,
                                 jsonp: 'callback',
                                 type:'POST',//HTTP请求类型
                                 timeout:10000,//超时时间设置为10秒;
                                 success:function(data){
                                   if(data){
                                     alert("登录成功!");
                                   }else{
                                     alert("登录失败!");
                                   }
                                      
                                 },
                                 error:function(xhr,type,errorThrown){
                                      console.log(type);
                                      //alert(xhr);
                                 }
                            }); 
    后台
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
           response.setHeader("Access-Control-Allow-Origin","*");
           response.setContentType("text/json; charset=utf-8");
           response.setHeader("Access-Control-Allow-Methods","GET,POST,OPTIONS,DELETE");
           response.setHeader("Access-Control-Max-Age","3600");
           response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
           String callback=request.getParameter("callback");
           if(null==callback){
             System.out.println("不是跨域请求");
           }else{
             System.out.println("是跨域请求");
           }
          
           PrintWriter out=response.getWriter();
              String userName=request.getParameter("username");
              String passWord=request.getParameter("password1");
              Map<String,String> map = new HashMap<String,String>();  
            map.put("result", "true"); 
              String jsonString="{"a":"1"}";
              if("123456".equals(userName) && "123456".equals(passWord)){
                //out.write(jsonString);
                out.println(callback+"("+jsonString+")");
              }else{
                //out.write(jsonString);
                out.println(callback+"("+jsonString+")");
              }
              out.flush();
              out.close();
         }
     
  • 相关阅读:
    JS之事件及冒泡
    DOM读取和修改内联样式
    dom查询与修改的一些常用方法
    js修改this指向的三种方法(call,bind,apply)
    JS原型概念
    JS创建对象
    JS的this(谁调用就指向谁)
    变量声明提前与函数声明提前
    JS对象创建
    正则应用之数据采集房屋网站信息
  • 原文地址:https://www.cnblogs.com/heyesp/p/10376399.html
Copyright © 2020-2023  润新知