json如何解决跨域问题的

跨域问题一直以来都是前端工程师必须面对的挑战。在同源策略的限制下，如果通过 AJAX 请求跨域数据，将会被浏览器所拒绝。那么，我们该如何在这种情况下获取到跨域的数据呢？这时，JSONP 和 CORS 就成为了解决跨域问题的常用方案。

JSONP（JSON with Padding）是一种使用 <script> 元素来加载 JSON 数据的方法。通过在服务器上动态生成 JSON 数据并返回一个函数调用，同时将数据作为函数的参数传递进去，客户端通过 script 标签引入网站对应的 URL 即可得到数据。

    <script>
        function handleData(data) {
            console.log(data);
        }
    </script>
    <script src="http://example.com/api?callback=handleData"></script>

在上面的代码中，API 返回的数据应该是类似于以下 JSON 对象的数据：

    {
        "name": "John","age": 26,"email": "[email protected]"
    }

服务器就是动态地生成以下的代码：

    handleData({
        "name": "John","email": "[email protected]"
    })

通过这种方式，我们就可以绕过浏览器的 CORS 限制，而从 API 中获取数据。

需要注意的是，JSONP 只适用于 GET 请求，而且需要 API 支持回调函数的调用。同时，JSONP 存在一定的安全风险，因为我们不知道 API 返回的数据是否安全。

CORS（Cross-Origin Resource Sharing 对应的缩写）是一种系统级别的解决方案。其思想是服务器端接收请求，在响应头信息中添加一些关键字，如 "Access-Control-Allow-Origin"，来告诉浏览器该资源是否可以跨域访问。

    Access-Control-Allow-Origin: https://example.com

上述代码表示，只允许 https://example.com 域名下的网页访问该资源。同时，CORS 也支持凭证机制（即可以带上 Cookie）。

CORS 相对于 JSONP 来说，更加安全可靠。但需要服务端支持，且需要在响应头中添加关键字。

CORS 和 JSONP 的使用场景都不同，需要根据自己的实际情况选择。在实际开发中，前端工程师需要对这两种方案有一定的了解，以便合理选择方案，解决跨域问题。