你再不知道怎么解决跨域,我就真的生气了

4,195 阅读3分钟

给大家讲一个故事吧。

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

面试官问我:“什么是跨域?”

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

面试官:“嗯,好,那么怎么解决跨域问题,有什么方法?”

我:“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('开启了') })

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

结果

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


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