jsonp原理

最新推荐文章于 2022-05-06 11:26:43 发布

xingyunwei1

最新推荐文章于 2022-05-06 11:26:43 发布

阅读量96

点赞数

文章标签： jquery javascript html5

本文链接：https://blog.youkuaiyun.com/xingyunwei1/article/details/120852830

版权

本文详细介绍了如何使用JSONP解决前端跨域问题，通过创建script标签，设置src属性并预先定义回调函数来实现。同时，文章还探讨了Vue CLI中设置代理服务器的方法，通过修改vue.config.js文件，配置devServer.proxy来代理API请求，从而规避同源策略限制，实现与后端API的顺利通信。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端代码

	<!DOCTYPE html>
	<html lang="en">
	
	<head>
	  <meta charset="UTF-8">
	  <meta name="viewport" content="width=device-width, initial-scale=1.0">
	  <meta http-equiv="X-UA-Compatible" content="ie=edge">
	  <title>Document</title>
	  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>

	</head>
	
	<body>
	  <script>
	    function showInfo123(data) {
	      console.log(data)
	    }
	  </script>
	
	
	<script src="http://127.0.0.1:3000/getscript?callback=showInfo123"></script>
	<!-- <script>
	  show()
	</script> -->
	
	
	<button id="btn">jsonp</button>
	
	</body>
	
	</html>
	
	<script>
	$('#btn').click(function(){
	  var frame = document.createElement('script');
	  frame.src = 'http://localhost:3000/getscript?callback=showInfo123';
	  $('body').append(frame);
	})
	</script>

后端代码

		  // 导入 http 内置模块
		const http = require('http')
		// 这个核心模块，能够帮我们解析 URL地址，从而拿到  pathname  query 
		const urlModule = require('url')
		
		// 创建一个 http 服务器
		const server = http.createServer()
		// 监听 http 服务器的 request 请求
		server.on('request', function (req, res) {
		
		  // const url = req.url
		  const { pathname: url, query } = urlModule.parse(req.url, true)
		
		  if (url === '/getscript') {
		    // 拼接一个合法的JS脚本，这里拼接的是一个方法的调用
		    // var scriptStr = 'show()'
		
		    var data = {
		      name: 'xjj',
		      age: 18,
		      gender: '女孩子'
		    }
		
		    var scriptStr = `${query.callback}(${JSON.stringify(data)})`
		    // res.end 发送给 客户端， 客户端去把 这个 字符串，当作JS代码去解析执行
		    res.end(scriptStr)
		  } else {
		    res.end('404')
		  }
		})
		
		// 指定端口号并启动服务器监听
		server.listen(3000, function () {
		  console.log('server listen at http://127.0.0.1:3000')
		})

总结：

ajax 请求受同源策略影响，不允许进行跨域请求，我们利用 script 标签的 src 属性不受同源策略的约束，利用这个特性jsonp需要以下步骤：

1.创建<script></script>(document.createElement('script'))
2.设置src 属性，(src中要包含参数callback=fn)进行跨域请求
3.将 <script></script>添加到页面中执行（body.appendChild('script')）
4.页面要提前定义好callback。
5.后端会返回回调函数执行并包裹参数callback(data)

vue-cli如何设置代理跨域

vue组件中

 fn(){
      this.$axios.get('/api/api/v1/home').then(res=>{
           console.log(res.data);
      })
    }


module.exports={
    devServer: {
        proxy:{
            '/api':{
                target:'http://127.0.0.1:3002/',//跨域请求资源地址
                ws:false,//是否启用websockets
                changeOrigin:true,//开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
                pathRewrite:{
                    '^/api':''//注册全局路径
                }
            }
        }
    }
}