关于跨域

红太狼 2023-10-10 09:56 35阅读 0赞

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

**如何解决跨域：**

**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);
                }
            });