javascript --- > [jsonp] script标签的妙用(绕过同源限制)

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