跨域解决办法以及实现JSONP代码

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

一、为什么会产生跨域？

跨域是因为浏览器的同源策略引起的，同源策略是浏览器的一个安全机制，它阻止了不同域之间进行数据交互。只要协议、端口或域名其中有一个不同就会产生跨域。

二、解决跨域的九种方法

	1、JSONP动态创建script标签和执行回调的方法 (只能发送GET请求)
	2、CORS跨域资源共享 (需要前后端配合)
	3、H5新增的POSTMessage
	4、document.domin + iframe
	5、location.hash + iframe
	6、window.name + iframe
	7、node 中间件
	8、nginx 代理
	9、websocket

三、JSONP实现代码

前端JS代码部分

// 在全局创建script标签，等数据请求结束之后方便删除
const scr = document.createElement("script")
const body = document.body
// 回调函数
function showData(data){
    console.log('收到的响应数据:',data)
    // 得到响应数据之后删除新创建的script标签
    body.removeChild(scr)
}
// 请求函数，通过向body中添加script标签
const JSONP = ({url,params,callback})=>{
	// newUrl 将请求地址和参数拼接在一起
    let newUrl = url + '?'
    for (let key in params){
        newUrl += `${key}=${params[key]}&`
    }
    // 最终的URL：http://127.0.0.1:3000/api/jsonp?name=dw&age=20&callback=showData
    const URL = `${newUrl}callback=${callback}`
    scr.setAttribute('src', URL)
    body.appendChild(scr)
}
// 调用JSONP函数
JSONP({
    url:'http://127.0.0.1:3000/api/jsonp',
    params:{name:'dw',age:20},
    callback:'showData'
})

后端Node.js代码

const express = require('express')
const app = express()
app.use(express.urlencoded({extended:false}))
app.get('/api/jsonp',(req,res)=>{
    // 定义 JSONP 接口具体的实现过程
    // 1.得到函数的名称
    const funcName = req.query.callback
    //2.定义要发送到客户端的数据对象
    const data = {status:1,message:'请求成功'}
    //3.拼接出一个函数的调用
    const scriptStr = `${funcName}(${JSON.stringify(data)})`
    //4.把拼接的字符串响应给客户端
    res.send(scriptStr)
})
app.listen(3000,_=>{
    console.log("Server is running")
})

结果截图