6.9 跨域的问题 Access-Control-Allow-Origin

什么是跨域？

由一个网址另外一个网址发送请求，出于安全考虑，浏览器存在同源政策，只要协议，域名，端口中的任意一个不同，不会导致跨域 Access-Control-Allow-Origin

三种解决方法

jsonp（前后端都需要设置）

原理：script标签不受同源政策的影响，所以不存在跨域问题
客户端传一个回调函数给服务器端，然后服务器端，通过函数返回数据（作为函数的参数）
通过script标签发送的请求

node端

app.get('/jsonp', (req, res) => {
    var data = { name: 'jsonp数据' }
    data = JSON.stringify(data);
    var callback = `${req.query.callback}(${data})`;
    res.send(callback)
})

通过jquery

 // 通过jsonp解决跨域问题
    function handleResponse(data) {
        console.log(data);
    }
    function getJsonp() {
        $.ajax({
            url: 'http://localhost:3000/jsonp',
            data: { name: 'zs' },
            dataType: 'jsonp',
            jsonpCallback: 'handleResponse'
        })
    }

通过原生js

// 通过jsonp解决跨域问题
    function handleResponse(data) {
        console.log(data);
    }
function jsonp() {
        var script = document.createElement('script');
        script.src = 'http://localhost:3000/jsonp?callback=handleResponse&name=zs&_=1623170793455';
        document.body.appendChild(script)
    }

cors （后端设置）

在nodejs端加上一下代码，便能解决跨域

//cors解决跨域
app.use(function (req, res, next) {
    res.setHeader('Access-Control-Allow-Origin', '*');//设置请求源 一般不写*
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, DELETE');//设置请求的方法
    res.setHeader('Access-Control-Allow-Headers', '*'); //设置请求头
    next();
});

proxy(代理 前后端任意一个都行)