1. 同源
1.1 什么是同源
协议、域名、端口号相同
1.2 为什么有同源政策
同源政策是为了保护用户信息的安全,放置恶意的网站窃取数据。最初的同源政策是指A网站再客户端设置的Cookie,B网站是不能访问的.
随着互联网的发展,同源政策也越来越严格,在不同源的情况下,其中有一项规定就是无法向非同源地址发送Ajax请求,如果请求,浏览器就会报错
2. jsonp
- jsonp是json with padding(将JSON数据作为填充内容)的缩写,它不属于Ajax请求,但它可以模拟Ajax请求。
- 核心:利用了script标签可以向非同源端的服务器发送请求的特性,加载完毕后,相当于把服务器返回的内容当作JavaScript代码执行
2.1 准备工作
- 准备2个服务器,一个监听3000端口(作为客户端),一个监听3001端口(作为服务端)
- 两个服务器都暴露静态资源,3000端口服务器代码如下(3001端口类似):
const express = require('express')
const path = require('path')
const app = express()
app.use(express.static(path.join(__dirname, 'public')))
app.listen(3000, () => {
console.log('http://localhost:3000')
})
2.2 JSONP的实现
1.在3001端口服务器中添加如下代码:
app.get('/jsonp',(req,res)=>{
const data = `fn({name:'Marron', age:18, remarks:'JSONP测试'})`;
res.send(data)
})
2.先定义一个全局函数,在使用script标签加载S2服务器的资源
<script>
// 假设服务器返回的数据存储在data中
function fn(data) {
console.log(data);
}
</script>
<!-- 使用jsonp加载资源 -->
<script src