js---Ajax访问远程api访问失败的处理方法

• Ajax访问远程的api，存在访问失败的问题（跨域问题）

一、如何产生跨域

1. 协议不同

• https、http
• http://www.maomao.com:80
• https://www.maomao.com:80

2. 端口号不同

• 63342、80|8080
• http://www.maomao.com:63342
• http://www.maomao.com:80

3. 域名不同

• http://www.xiaohei.com:80
• http://www.maodou.com:80

二、产生跨域的解决办法

1. cros跨域资源共享

• 前端不需要配置，后台直接设置请求头 Access-Control-Allow-Origin:*
• *是所有域名访问

    function Ajax(method,url,data,callback){
        var http;
        if(window.XMLHttpRequest){
            http=new XMLHttpRequest();
        }
        else{
            http=new ActiveXObject("Microsoft.XMLHTTP");
        }
        if(method=="get"){
            if(data){
                url+="?";
                url+=data;
            }
            http.open(method,url);
            http.send();
        }
        else{
            http.open(method,url);
            if(data){
                http.send(data);
            }
            else{
                http.send();
            }
        }
        http.onreadystatechange=function(){
            if(http.readyState==4&&http.status==200){
                callback(http.response);
            }
        }
    }
    Ajax("get",'http://127.0.0.1:8080/findUser',null,function(res){
        console.log(JSON.parse(res));
    });
    Ajax("post",'http://localhost:8080/getList',null,function(res){
        console.log(JSON.parse(res));
    });
    Ajax("get",'http://localhost:8080/insertUser','id=10086&name=小李',function(res){
        console.log(JSON.parse(res));
    });
    Ajax("post",'http://localhost:8080/insert',"id=10086&name=张三",function(res){
        console.log(res);
    }); 

• 后台服务器
• server.js

const express=require("express");
const app=express();
const url=require("url");
let port=8080;
let host="localhost";
//接入中间件
app.use((req,res,next)=>{
   //设置cros跨域访问
   //*是所有域名访问
   res.header('Access-Control-Allow-Origin','*');
   next();
})
//get请求
app.get("/",(req,res)=>{
   res.send("首页");
});
app.get("/findUser",(req,res)=>{
   let user=[
       {id:1,name:"张三",sex:"男"},
       {id:2,name:"李四",sex:"女"}
   ];
   res.json(user);
});
app.post("/getList",(req,res)=>{
   let list=["首页","课程","活动"];
   res.send(list);
});
app.get("/insertUser",(req,res)=>{
   console.log(req.query);
   let effectRows={effectrows:1};
   res.json(effectRows);
});
app.post("/insert",(req,res)=>{
   let info="?";
   req.on("data",(args)=>{
       info+=args.toString();
   })
   req.on("end",()=>{
       let query=url.parse(info,true).query;
       res.send(query);
   });
});
app.listen(port,host,()=>{
   console.log(`http://${host}:${port}`);
});

2. jsonp跨域

• jsonp 不属于ajax请求，也叫 src跨域，script中的src属性就是jsonp跨域，jsonp只能是get方式
• 传递回调函数给后台 后台处理回调函数 返回到前端执行函数
• https://www.naodou.com:80?id=100&name=mdsds&callback=getData

    <script>
        function subinfo(res){
            console.log(res);//成功
        }
    </script>
    <script src="http://localhost:8080/jsonpinfo?id=10086&name=mmmm&cb=subinfo"></script>

• server.js

const express=require("express");
const app=express();
const url=require("url");
let port=8080;
let host="localhost";
//jsonp请求的接口
app.get("/jsonpinfo",(req,res)=>{
   let query=req.query;
   let id=query.id;
   let name=query.name;
   let callback=query.cb;
   console.log(id,name,callback);
   res.send(`${callback}('${'成功'}')`);
});
app.listen(port,host,()=>{
   console.log(`http://${host}:${port}`);
});