当前位置: 代码迷 >> 综合 >> *JSONP
  详细解决方案

*JSONP

热度:104   发布时间:2023-12-03 11:11:27.0

当用AJAX跨越访问就会被拦截,此时就应用到JSONP

浏览器的同源策略

        ajax网络请求是   如果当前页面来自于a服务器  但是想请求b服务器的资源就会被浏览器阻止

        同源: 协议 ip port

         https://www.baidu.com/index.html

         http://www.baidu.com/ajax1 非同源

         https://news.baidu.com/ajax1 非同源

         https://www.mbaidu.com/index.html  非同源

          https://www.baidu.com/index.html?user=karen  是同源的

        

        只要ajax请求跨域的网址就会被阻止,但是我们可以利用非ajax做网络请求 解决跨域问题:

        JSONP  CORS 代理

//2.封装 //前端发送网络请求<script>function clicked () {var cb="hqyj"+new Date().getTime()    //这样做调用函数的函数名就不会重复//这里在全局作用域下创建一个函数来接收返回后端数据window[cb]=function (arg) {    console.log(arg)	}var sr=document.createElement("script")sr.src=`http://192.168.5.109:8081/jsonp1?callback=${cb}`document.body.appendChild(sr)}</script>
//后端JSONP接口<script>var querystring=require("querystring")var url=require("url")module.exports={xx(req,res){res.end('{"name":"karen"}')},jsonp1(req,res){var query=url.parse(req.url).queryvar queryObj=querystring.parse(query)res.end(`${queryObj.callback}({name:"karen"})`)// 'fn1({name:"karen"})'}
}

  相关解决方案