给大家讲一个故事吧。
在本渣两年前刚出来实习的时候,有一次去一家公司面试。
面试官问我:“什么是跨域?”
我:“跨域是浏览器同源策略造成;协议,域名,端口,三者有一不同就会产出跨域。”
面试官:“嗯,好,那么怎么解决跨域问题,有什么方法?”
我:“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('开启了') })
这里服务端通过响应头解决了跨域,这里我允许了所以域名都可以请求该服务端,也指定了可以通过大部分请求方法可以通过请求。
结果
以上就是我对这两种跨域的具体实现方式给出的答案,希望能够帮助到你,要是觉得有不足的地方,欢迎留言我们交流交流,互相进步,谢谢。
🇨🇳祖国加油,武汉加油,有国才有家,我们同在🇨🇳。