关于跨域

跨域的概念：
非同源地址间的请求称为跨域。（同源指的是协议，端口，域名完全相同）。

如何解决跨域：

1.在服务器端添加允许跨域。

respones.setHeader('Access-Control-Allow-Orign','*')

2.利用jsonp访问服务器

  var url = '域名?callback=fn';
        var jsonp = document.createElement('script');
        jsonp.src = url;
        document.body.appendChild(jsonp);
        function fn(data) {
            console.log(data);
        }

jquery中的jsonp形式：

   $.ajax({
        url: '',//服务器地址
        dataType: 'jsonp',
        jsonp: '回调函数名称',
        sucess: function (data) {
            console.log(data)
        },
        error: function (err) {
            console.log(err)
        }

3.利用中转服务器

var disUrl = '';//目标地址
        var url = '中转服务器的地址？myurl=' + disUrl;
        request(url,get,function(data){
            console.log(data)
        });//request为封装好的ajax请求

4.利用第三方api,例如fetch,axios
1）fetch

//get 无参
        var url = '   ';
        fetch(url).then(function (res) {
            // console.log(res)
            return res.text();
        }).then(function (data) {
            console.log(data);
        })

fetch（）方法会返回一个promise对象，而then（）是promise对象的一个方法，其返回值仍然是一个promise对象。
text（）是按字符串格式接收。
jsonp（）是将字符串解析为对象。

//post 有参
        var person = 'username=admin&psd=123';
        var url = 'http://localhost:5000';
        fetch(url, {
            method: 'post',
            body: person,
        }).then(function (res) {
            // console.log(res)
            return res.josn();
        }).then(function (data) {
            console.log(data)
        }

2）axios
①导入axios.js；
②

// get post无参

    axios({
        method: 'get',//get or post
        url: 'http://localhost:3000',

    }).then(function (res) {
        console.log(res.data)
    })

  //post get带参 将参数写入data中。
           axios({
            method: 'post',//post or get
            url: 'http://localhost:4000',
            data: 'name=java',
        }).then(function (data) {
            for(var i=0;i<data.data.data.length;i++){
                console.log(data.data.data[i].name);
            }
        });