什么是跨域？为什么会跨域？
协议、端口和域名不一致成为跨域
跨域是因为浏览器需要遵守同源策略，发出的请求即使相应成功，也会被浏览器拦截下来
这个不细说了，一般面试官问你的是👇
如何解决跨域（JSONP）
拼脚本，写回调，重点：脚本src中的clientCallback和你声明的clientCallback
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>怎么用JSONP跨域</title>
</head>
<body>
<button id="btn">发</button>
<script>
document.getElementById('btn').onclick = ()=>{
go();
}
function go () {
const s = document.createElement('script')
s.src = 'http://localhost:3000?cb=clientCallback'
s.async=true;
document.body.appendChild(s);
}
function clientCallback(data){
console.log(data); // 返回跨域请求结果
}
</script>
</body>
</html>
ky.png
为什么要这么做？
浏览器不会拦截跨域的script请求，相当于你向服务端要了一个JavaScript脚本文件并且立即执行
你这不是jQuery的啊，jQuery中怎么搞？
jQuery更简单，网上一堆爆款文，自查（axios同理）
服务端做了什么？
以express框架为例，只要设置回调名和返回jsonp格式的数据就好：
const express = require('express');
const app = express ()
const router = express.Router();
router.get('/', function(req, res, next) {
res.jsonp({a:111,b:222});
});
app.set('jsonp callback name', 'cb');
app.use('/',router)
有没有别的办法(Access-Control-Allow-Origin)
当有跨域请求返回时，浏览器已经说得清清楚楚：服务端未提供'Access-Control-Allow-Origin'响应头
求求你们了，报错的时候看看错误信息吧！
在服务端设置响应头并返回（express）：
res.set({
'Access-Control-Allow-Origin' : 'http://localhost:63342'//如果允许所有的跨域请求，url可以换成'*'
})
res.json({a:111,b:222});
前端直接请求(xhr, jquery封装后的Ajax，fetch whatever)：
document.getElementById('btn').onclick = ()=>{
fetch('http://localhost:3000').then(res=>{
return res.json()
}).then(res=>{
console.log('返回成功')
console.log(res)
})
}
网友评论