实现通过跨域获取数据的几种方法

7 篇文章 1 订阅
3 篇文章 0 订阅

新建一个test.js,在当前目录的dos

运行:node test.js

const http = require('http');
const fs = require('fs');
http.createServer((req, res) => {
  console.log("req:" + req.url);
  res.writeHead('200', {
    'Access-Control-Allow-Origin': '*'
  });
  res.end('123');
}).listen(1111);

 在浏览器中输入http://localhost:1111/中即可返回123

test.html

方法一、jsonp
有些请求是不受到跨域限制。例如:WebSocket,script、img、iframe、video、audio标签的src属性等
<script src="http://127.0.0.1:1111"></script>
如果返回时json格式的数据,可以这样
<script>
  var script = document.createElement('script');
  script.src = 'http://127.0.0.1:1111/?cb=myCallback';
  document.getElementsByTagName('head')[0].appendChild(script);

  function myCallback(res) {
    alert(JSON.stringify(res, null, 2));
  }
</script>

<script>
方法二、fetch
    fetch('http://127.0.0.1:1111', {
      method: 'get',
      headers: {}
    }).then(function (res) {
      return res.json();
    }).then(function (res) {
      console.log(res);
    }).catch(function(e) {
      console.log("error");
    })

方法三、原生js
let xhr = new XMLHttpRequest();
    xhr.open('GET','http://127.0.0.1:1111');
    xhr.send();
    xhr.onload=function () {
      console.log(xhr.response);
      console.log(xhr.responseText);
}
方法四、jquery(先导入jquery)
$.get('http://127.0.0.1:1111', res => {
      console.log(res);
    });
//或者
$.ajax({
      url:'http://127.0.0.1:1111',
      method:'get',
      success:function (res) {
        console.log(res);
      }
    })

方法五、使用代理(proxy)
</script>

方法五链接

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值