jsonp原理,cors处理跨域

最新推荐文章于 2022-12-02 20:58:27 发布

2c不高兴

最新推荐文章于 2022-12-02 20:58:27 发布

阅读量1.1w

点赞数

分类专栏： es6/es5/git

本文链接：https://blog.csdn.net/Blackcat0/article/details/110480738

版权

es6/es5/git 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

1. 前端代码

<!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>

2. 后端代码 node.js

  // 导入 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')
	})

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

1.动态创建<script></script>(document.createElement('script'))
2.设置src.属性，(src总要包含参数callback=fn)进行跨域请求
3. 将 <script></script>添加到页面中执行（body.appendChild('script')）
4.页面要提前定义好callback，进行页面操作。

备注：
服务端不再返回JSON格式的数据，而是返回回调函数包裹数据（fn({name:‘tom’,age:18}），在src中进行了调用，这样实现了跨域。

CORS设置跨域请求

 //设置允许跨域的域名，*代表允许任意域名跨域  CORS跨域
 res.setHeader("Access-Control-Allow-Origin","http://127.0.0.1:3003");

前端代码：

<!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>
</head>
<body>
    <button class="qq" id="qq">请求数据</button>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script>
$('#qq').click(function(){
    $.ajax({
        url:'http://127.0.0.1:3000/getscript',
        type:'get',
        success:function(data){
            console.log(data)
        }
    })
})
</script>
</html>

vue-cli如何设置代理跨域

vue组件中：

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

vue.config.vue:

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

2c不高兴

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jsonp原理,cors处理跨域

1. 前端代码<!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"> <titl
复制链接

扫一扫

专栏目录