解決 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();
     }