网络请求技术 跨域

方式1:

当一个端口号8888服务器向端口号8881服务器发起网络请求时会报错

只需要在被请求的业务中写上如下代码加上发起请求的网址IP

这样就会给白名单  

res.setHeader("Access-Control-Allow-Origin","http://192.168.1.5:8888") 

方式2:

JSONP

被请求后端代码:

JSON.stringify()转换字符串json数据

url.parse(req.url).query 将网址对象化并取出query部分

var querobj=querystring.parse(query1)将取出的query部分 转化为键和值的对象这里是query1={callback:name}

res.end(`${querobj.callback}(${str})`)  返回一个字符串给script的src请求  这里是callback(str)函数

也可以是name(str)

var obj={name:"karen",age:20,books:["css","js","node"]}
	var str=JSON.stringify(obj)
	let query1=url.parse(req.url).query
	var querobj=querystring.parse(query1) //'key1=value1&key2=value&callback=fn1'	  将取出的query部分变成一个对象  querobj={callback:name}
	res.end(`${querobj.callback}(${str})`)//向前端发送querobj.callback(str)   前端通过query网址传来一个name变量 这里是querobj

发送请求的前端代码:

1.获取一个字符串+当前时间的随机值 赋值给name

2.dom操作创建一个script标签

3.script标签的src值可以做网络请求且能跨域 当请求的后端返回了一个js文件 内容为var a=1时可以直接在当前项目使用

这里的网络请求发送的网址 还带了一个query部分

4.发送请求后后端部分对query部分进行了拆分 返回了一个名为name的函数直接运行

5.这时上面的window[name]就可以执行

6.最后将script添加到body父元素中

function fn2(){
				var name="hqyj"+new Date().getTime()
				window[name]=function(arg){
					console.log(111111111,arg)
				}
				var script1=document.createElement("script")
				script1.src=`https://api.weibo.com/2/statuses/home_timeline.json?access_token=2.00ZmCkcDlel8HDd856f9b9ccsVwsYD&callback=${name}`
				document.body.append(script1)
			}

可以用这种方法直接请求微博数据:


			function fn2(){
				var name="hqyj"+new Date().getTime()
				window[name]=function(arg){
					console.log(111111111,arg)
				}
				var script1=document.createElement("script")
				script1.src=`https://api.weibo.com/2/statuses/home_timeline.json?access_token=2.00ZmCkcDlel8HDd856f9b9ccsVwsYD&callback=${name}`
				document.body.append(script1)
			}

方式3:

request函数直接请求

但显示的网址是自己的网址

router.get("/home",function(req,res){
    // fs.readFile(__dirname+"/public/test.html",(err,data)=>{
    //     res.end(data)
    // })
    request("http://www.baidu.com/index.html",function(arg1,arg2,arg3){
        // console.log(arg3);//在小黑窗请求到了数据
        res.end(arg3)//后端返回百度数据 然后我的网站/home就变成了百度 
    })
    
})

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值