同源策略就是协议、ip和端口号三者必须相同。
在浏览器中,所有的请求必须遵守同源策略,否则就会出现跨域问题。
解决跨域问题的方法:
1.JSONP
优点:可以代价比较小的实现跨域
缺点:不支持post请求
服务端jsonp代码:
const http = require('http')
const url = require('url')
http.createServer((req, res) => {
const urlObj = url.parse(req.url, true)
console.log(urlObj.query)
switch (urlObj.pathname) {
case '/api/aaa':
res.end(`${urlObj.query.callback} (${JSON.stringify({
name: 'hh',
age:21
})})`)
break
default:
res.end('404')
}
}).listen(3000, () => {
console.log('start')
})
web端jsonp代码:
<html>
<body>
</body>
</html>
<script>
const mySrcipt = document.createElement('script')
mySrcipt.src = 'http://127.0.0.1:3000/api/aaa?callback=say'
document.body.appendChild(mySrcipt)
function say(val){
console.log(val)
}
// 利用了script标签的src可以跨域的特点,传递一个callback参数给服务端
// 在服务端返回中构造一个函数的调用来传参
// 在web端执行一个同名的函数来接受参数
// 优点:可以代价比较小的实现跨域
// 缺点:不支持post
</script>
<!--
CORS:
利用access-control-allow-origin设置允许跨域的源
-->
?2.CORS
在服务端设置access-control-allow-origin 允许跨域的源