给大家讲一个故事吧。

在本渣两年前刚出来实习的时候，有一次去一家公司面试。

面试官问我：“什么是跨域？”

我：“跨域是浏览器同源策略造成；协议，域名，端口，三者有一不同就会产出跨域。”

面试官：“嗯，好，那么怎么解决跨域问题，有什么方法？”

我：“JSONP和CORS”

面试官：“好，那它们是具体是怎么做的呢？”

我：“嗯....我只知道它们能解决跨域的问题，但我没有去实现过，具体我不知道。”

面试官：“哦，好的，我们今日先聊到这里吧，回去等通知吧”

以上是本渣当时的一次真实经历，最后我没有等到通知，当时我对跨域问题真的只有一个概念，叫我去解决这个问题，我是真的不知道怎么去做。

现在还有多少人还会遇到我当时一样的经历，我真的不知道，但是，今日我告诉你，我踩过的坑，我不允许你再去踩。看完这篇文章你还不懂怎么解决跨域，我就真的生气了。😡

现在让本渣来告诉你JSONP和CORS是怎么具体解决跨域问题的。

JSONP

所谓的JSONP就是前端通过script标签不受通源策略的影响的特性，向API接口拼接一个回调发送给服务端，然后服务端拿到这个回调，执行拼将需要的数据放进回调的参数里，最后服务端将该函数返回给浏览器，所以这种跨域方式需要前端和后端配合

下面本渣通过代码复原上面的描述

前端

 <script>
    function callback(data){
        console.log(data)
    }
</script>
<script src="http://localhost:3000?callback=callback"></script>

前端定义一个回调函数叫callback，然后将该回调的名字拼接到API后面发给服务端。

服务端(本渣用的是NODE做为服务端演示)

const express = require('express')

const app = express()

app.get('/', (req,res) => {

    let callback = req.query.callback

    res.send(`${callback}(${JSON.stringify({
        success:0,
        data:{
            name:"yuefengsu"
        }
    })})`)

})

app.listen(3000, () => { console.log('开启了') })

服务端拿的发过来的回调名字，然后执行并且将需要的数据放到回调参数上返回出给客户端。

结果：

CORS

所谓的CORS就是服务端通过设置响应头实现（比如Access-Control-Allow-Origin:也就是设置给那个请求域响应数据；Access-Control-Allow-Methods：给请求域指定能够使用哪些方法来请求该服务端），所以这种方法，服务端可单方面完成

下面本渣通过代码复原上面的描述

前端

 <script>
        
        let xhr = new XMLHttpRequest()

        xhr.open('GET','http://localhost:3000/',true)

        xhr.onreadystatechange = function(){

            if(xhr.readyState === 4 && xhr.status === 200){

                console.log(xhr.responseText)

            }

        }

        xhr.send(null)

    </script>

这里前端通过AJAX向指定服务端发送了一个GET请求

服务端

const express = require('express')

const app = express()

app.all('*', function (req, res, next) {
    res.header("Access-Control-Allow-Origin", "*")
    res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS")
    res.header("Content-Type", "application/json;charset=utf-8")
    next()
})

app.get('/', (req,res) => {
    res.json({
        success:0,
        data:{
            name:"yuefengsu"
        }
    })

})

app.listen(3000, () => { console.log('开启了') })

这里服务端通过响应头解决了跨域，这里我允许了所以域名都可以请求该服务端，也指定了可以通过大部分请求方法可以通过请求。

结果

以上就是我对这两种跨域的具体实现方式给出的答案，希望能够帮助到你，要是觉得有不足的地方，欢迎留言我们交流交流，互相进步，谢谢。

🇨🇳祖国加油，武汉加油，有国才有家，我们同在🇨🇳。