如何解决跨域问题？

1.jsonp

使用 jsonp 来实现跨域请求，它的主要原理是通过动态构建 script 标签来实现跨域请求，因为浏览器对 script 标签的引入没有跨域的访问限制。通过在请求的 url 后指定一个回调函数，然后服务器在返回数据的时候，构建一个 json 数据的包装，这个包装就是回调函数，然后返回给前端，前端接收到数据后，因为请求的是脚本文件，所以会直接执行，这样我们先前定义好的回调函数就可以被调用，从而实现了跨域请求的处理。这种方式只能用于 get 请求。

接下来我们通过一个实例来尝试：

前端逻辑

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <script>
        debugger
        function jsonpCallback(data) {

            console.log(data)
            alert('获得 X 数据:' + data.x);
        }
    </script>
    <script src="http://127.0.0.1:8000/api/blog/jsonp?callback=jsonpCallback"></script>
</body>

</html>

后端逻辑

router.get('/api/blog/jsonp', (req, res, next) => {
    const callback = req.query.callback;
    const data = {
        x: 10
    };
    console.log(callback);
    res.writeHead(200);
    res.end(`${callback}(${JSON.stringify(data)})`)

});

优点：