浏览器http请求与跨域

时隔多年，又重操旧业，隔了好长时间没有写博客了，写博客是最开心的了（没有之一），今日份营业开始后，嗯，就这样,over，开玩笑哈哈哈。

言归正传，今天重新梳理了一遍浏览器进行http请求和在请求时跨域的问题。

一、浏览器进行http请求

1、浏览器通过XMLHttpRequest对象进行http通信（IE除外，这个特立专行的“小可爱”使用ActiveXObject进行通信），其中使用原生的未被封装过的XMLHttpRequest请求数据的方式是最简单粗暴的。

代码实现

window.onload = () => {
  getApiData("XXXXXXXXX")
  .then( (res) => {
      console.log(res)
  })
}

function getApiData (url) {
    let xmlHttp = null;

    if(window.ActiveXObject)//IE支持

    {

        try {

        //IE6+, 创建一个ActiveXObject对象

        xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");

        }

        catch (e) {

        //IE5.5+

        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

        }

    }

    else if(window.XMLHttpRequest) //Firefox，Opera 8.0+，Safari，Chrome，IE7+ and .etc

    {

        xmlHttp = new XMLHttpRequest();

    }

    //采用同步加载,异步的话open的第三个参数为true

    xmlHttp.open("GET",url,false);


    xmlHttp.send();

    //4代表数据发送完毕
    let promise = null;

    if ( xmlHttp.readyState == 4 )

    {

        
    
        //0为访问的本地，200到300访问服务器成功，304访问的是缓存

        if((xmlHttp.status >= 200 && xmlHttp.status <300) || xmlHttp.status == 0 || xmlHttp.status == 304) {
            promise = new Promise((resolve, reject) => {
                resolve(xmlHttp.responseText);
            })
        } else {
            promise = new Promise((resolve, reject) => {
                reject("Get no data");
            })
            
        }

       

    }

    else

    {

        promise = new Promise((resolve, reject) => {
            reject("Get no data");
        })

    }
    return promise;
}

各位小可爱，XMLHttpRequest具体的方法和属性自己根据需要去找文档哈。

2、ajax(异步的 JavaScript 和 XML,但是返回的数据格式不仅限于XML哦）和axios

ajax是基于XMLHttpRequest的，可以使用jq封装好的ajax

$.ajax({url:"/jquery/test1.txt",async:false})

像这样直接调用就可以了，里面也有很多的参数可以设置哦，还有返回的数据格式等问题。

axios也是比较常用的请求数据的方式

const axios = require('axios');

// 以get方法为例
axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    console.log(error);
  })
  .then(function () {
    console.log("get userID");
  });

// 通过params传入查询参数
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    console.log(error);
  })
  .then(function () {
    console.log("get userID");
  });  

// 使用es6的async和await
async function getUser() {
  try {
    const response = await axios.get('/user?ID=12345');
    console.log(response.data);
  } catch (error) {
    console.error(error);
  }
}

可以使用的方法还是很多的，比如get,post,head,delete,options,patch,request,put,多姿多彩，百花齐放，还有那啥（编不下去了）。

二、跨域问题

当访问的接口地址跟项目地址不一致的时候可能就会出现跨域的问题啦，这时候怎么办呢，紧张兮兮，是不是会想悄咪咪算了，怎么能这样呢，作为一个爱学习，天天向上的好学生，我还能再撑一撑。跨域顾名思义就是域不同，有些浏览器可能会比较严格，啥都管，端口不同也不行。在这种情况下呢，浏览器是能访问服务器的，比如你想对服务器的某个数据进行修改，其实在服务器已经修改成功了，，它已经光明正大的修改了数据库了，然后修改完成后就会返回浏览器修改成功的消息，浏览器收到这个消息了，但是看到自己的地址 跟服务器的地址不在同一个域，作为一个有原则的浏览器就不愿意了，翻脸就是给敲键盘的一个错误提示（傲娇.jpg）

1、jsonp

是不是觉得有点眼熟，是的，没错，不是它

$.getJSON("https://www.runoob.com/try/ajax/jsonp.php?jsoncallback=?", function(data) {
    
    var html = '<ul>';
    for(var i = 0; i < data.length; i++)
    {
        html += '<li>' + data[i] + '</li>';
    }
    html += '</ul>';
    
    $('#divCustomers').html(html); 
});

这段代码没有测试过，我的错，下次还敢

jsonp还是挺简单的是吧，就是比较单调，虽然不受同源策略的管束，但是不像芦丹氏的肉丝袜或者寇依的爱情故事一样那么妖娆，只能支持get访问哦，就是post啥的都不行，而且过分的是在访问失败的时候也不会给你返回http状态码看的哦。

2、CORS（Cross-Origin Resource Sharing,跨域资源共享）

这个就厉害了，其实主要是在服务端进行设置

简单请求

如果浏览器要跨域访问，服务器小哥哥就会查看请求头里面是否有origin，如果有，服务器就会在返回的时候设置Access-Control-Allow-Origin为浏览器访问的地址，表示允许这个域的请求，也就是跟origin的值一样，回到浏览器小姐姐这边，小姐姐看到这个Access-Control-Allow-Origin的值为自己当前的地址，满心欢喜啊，然后就皆大欢喜啦。

复杂请求，，，额，顾名思义就是不是简单请求

复杂请求前面有个预检请求，接下来不说了，因为我好像对复杂请求不太 感冒

三、webpack设置代理

proxyTable: {
   '/api': {
      target: 'http://192.168.31.20:3000',
      changeOrigin: true,
      pathRewrite: {
          '^/api': ''
      }
   }
}

综上，结束

以上如有雷同，纯属意外，如有错误，就将错就错吧