跨域通信--JSONP和CORS的node版

最新推荐文章于 2024-03-16 05:15:00 发布

Bob丶抱抱

最新推荐文章于 2024-03-16 05:15:00 发布

阅读量327

点赞数 1

分类专栏： javascript 文章标签：前端 JSONP CORS 跨域 NODE

本文链接：https://blog.csdn.net/bob_baobao/article/details/78319473

版权

javascript 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

什么是跨域

因为浏览器有个同源策略的限制，只要发送url请求的协议、域名、端口三者与当前页面(location.origin)的地址有一个不同，即为跨域。
协议不同： http 和 https；
域名不同：主域或者子域不同；
端口不同：如6080， 6090；

跨域通信的两种方式

JSONP

因为浏览器对 script 标签没有同源限制，所以可以通过它来加载不同域下的数据。
(1) 前端test.html

<!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>JSONP 测试</title>
</head>
<body>
  <script>
    function jsonCallback(result){
      document.write('JSONP:' + JSON.stringify(result));
    }
  </script>
  <script src="http://10.9.8.46:6080/api/product/jsonp?callback=jsonCallback"></script>
</body>
</html>

(2) 服务端node

router.route('/jsonp').get((req, res) => {
  let cb = req.query.callback;
  let data = {
    name: 'bob',
    age: 24
  };
  let dataString = JSON.stringify(data);
  let send = `${cb}(${dataString})`;
  if (cb !== undefined) {
    res.send(send);
  } else {
    res.send(data);
  }
});

效果： test页面可以输出后台的数据
这里写图片描述

CORS

cors即为跨域资源共享，是现代浏览器实现跨域通信更好的一种方式。

（1）前端html

<!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>CORS 测试</title>
</head>
<body>
  <script>
    window.onload = function(){
      var ajax = new XMLHttpRequest();
      ajax.open('GET','http://10.9.8.46:6080/api/product/jsonp', true);
      ajax.send();
      ajax.onreadystatechange = function(){
        if(ajax.readyState === 4){
          if(ajax.status === 200){
            console.log(ajax.responseText);
          }
        }
      }
    }
  </script>
</body>
</html>

（2）服务端node
app.js 中引入cors库

const cors = require('cors');
app.options('*', cors(loginConfig.corsOptions));
app.all('*', cors(loginConfig.corsOptions));

loginConfig.js

const corsOptions: {
    origin: ['http://localhost:6080', null],
    methods: ['GET,HEAD,PUT,PATCH,POST,DELETE'],
    preflightContinue: false,    
    credentials: true        
}

router.js

router.route('/jsonp').get((req, res) => {
  let data = {
    name: 'bob',
    age: 24
  };
   res.send(send);
});

效果：前端页面的控制台可以获取服务端数据data。
这里写图片描述

总结

jsonp的跨域方式只能是get请求，适合小数据的传输，兼容ie8，9较早的浏览器。
cors的跨域方式支持get，post等多种请求方式，可以传输较多数据，支持现代浏览器（ie10+）。
跨域通信的方式还有 Proxy代理等。
想了解cors更多详情，请移步至同事haines的博文： http://blog.hainest.com/cross-domain-and-cross-origin/

Bob丶抱抱

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
跨域通信--JSONP和CORS的node版

什么是跨域因为浏览器有个同源策略的限制，只要发送url请求的协议、域名、端口三者与当前页面(location.origin)的地址有一个不同，即为跨域。协议不同： http 和 https；域名：主域或者子域不同；跨域通信的两种方式JSONP因为浏览器对 script 标签没有同源限制，所以通过它来加载不同域下的数据。
复制链接

扫一扫

专栏目录