JS 跨域请求和Ajax封装

1.同源策略

​ 1.浏览器的一个安全功能，不同源的网页脚本在没有明确授权的情况下，不能读写对方资源，所谓同源是指“协议+域名+端口”三者相同

​ 如果不使用浏览器此安全策略没有影响

​ 使用ajax技术从一个网页去请求另一个网页违反同源策略，会出现跨域问题

​ 2.跨域问题解决方法：
​ 1.不使用ajax技术(XMLHttpRequest)请求
​ 2.授权跨域资源共享
​ 3.使用代理服务器

2.JSONP技术：

原理：利用html的<script>标签天生可以跨域的特点，用其加载另一个域的json数据，
加载完成过后会自动运行一个回调函数通知调用者，此过程需要另一个域的服务端支持
router.get('/test', (request,response) => {
     response.write( “callback( {code:1,data:{content:'内容'}} )”);
}
使用callBack函数接收数据（后端包装callback）
 function callBack(data){
  console.log(data)
 }
            缺点：只支持get请求，需要服务端支持

跨域资源共享CORS

CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource ）。

它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用sharing的限制。

res.header( "Access-Control-Allow-Origin", "* ");
res.header( "Access-Control-Allow-Credentials", "true");

res.header("Access-Control-Allow-Methods","GET,POST,PUT,DELETE,OPTIONS");

3.JSONP封装

		 /*
          发生jsonp请求
            实现原理: 动态构造script标签，将请求url接口地址作为script属性src值
        */
        function getProductList(url) {
            //动态创建script标签
            let scriptEle = document.createElement('script') 			//<script>
            scriptEle.setAttribute('src', url)
            document.body.appendChild(scriptEle)
        }
        /*
         jsonp响应数据：
           callBack 由后端提供
        */
        function callback(result) {
            console.log(result);
        }

4.AJAX封装

/**
 * myajax网络请求工具函数
 * myajax(  {
            method: 'get',
            url: 'http://10.7.178.117:8088/api/delete',
            data: {
                uid: 101
            },
            success: function (data) {
                console.log('success => ', data);
            },
            error: function (err) {
                console.log('error => ', err);
            }
        })
 * @param {*} options 
 */
function myAjax(options) {
    const xhr = new window.XMLHttpRequest()
    let params = formatParmas(options.data) //uid=101
    let method = options.method.toUpperCase()
    if (method == 'GET') {
        xhr.open(method, options.url + '?' + params)
        xhr.send()
    } else if (method == 'POST') {
        xhr.open(method, options.url)
        xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')
        xhr.send(params)
    }
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
            if (xhr.status == 200) {
                let data = xhr.responseText
                data = JSON.parse(data)

                options.success(data)
            } else {
                options.error('网络请求失败')
            }
        }
    }
}

function formatParmas(paramsData) {
    let arr = []
    for (let key in paramsData) {
        arr.push(`${key}=${paramsData[key]}`) //[username=admin,password=123]
    }
    let str = arr.join('&')
    return str
}