跨域-JSONP/CORS

最新推荐文章于 2024-02-03 17:38:45 发布
最新推荐文章于 2024-02-03 17:38:45 发布
阅读量243 收藏 1
点赞数
分类专栏： JavaScript 文章标签： 跨域 JSONP CORS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_37068028/article/details/71439530
版权

同源策略：
* 同协议： 如都是http或者https
* 同域名： 如https://www.baidu.com/a和https://www.baidu.com/b
* 同端口： 如都是80端口
效果如下：当点击换一组时，从后台获取数据
这里写图片描述

1. 安装Mock Server

使用Mock Server 模拟请求数据

npm install -g server-mock

命令行中启动服务器

$ mock start
Success: server start success, open the link http://localhost:8080 in browser

2. 配置router.js

app.get('/getNews', function (req, res) {
  var news = [
    "秦岭鳌太仍有23名驴友失联 两遇难者来自云南",
    "观察：谣言转发大户80%是中老年人 精神空虚是主因",
    "上海加码楼市调控 新盘销售由公证机构主持摇号",
   "28省份取消政府还贷二级公路收费 里程超14万公里",
   "北京多条主干道大树被风刮倒 北三环爆堵",
   "山东河南蒜苔滞销 万能“大数据”为何也束手无策？"
  ];
  var data = [];
  for(var i = 0; i < 3; i ++) {
    var index = parseInt(Math.random()*news.length);
    data.push(news[index]);
  }
  res.send(data);
});

3. index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul class="news">
    <li>秦岭鳌太仍有23名驴友失联 两遇难者来自云南</li>
    <li>观察：谣言转发大户80%是中老年人 精神空虚是主因</li>
    <li>上海加码楼市调控 新盘销售由公证机构主持摇号</li>
</ul>
<button class="change">换一组</button>
<script>
    var change = document.querySelector('.change');
    var newsUl = document.querySelector('.news');
    change.addEventListener('click', function () {
        var xhr = new XMLHttpRequest();
        xhr.open('get', '/getNews', true);
        xhr.send();
        xhr.onreadystatechange = function () {
            if (xhr.readyState ===4&& xhr.status ===200) {
                appendHtml(JSON.parse(xhr.responseText));
            }
        }
    });
    function appendHtml(news) {
        var html = '';
        for (var i = 0; i < news.length; i ++) {
            html += '<li>' + news[i] + '</li>';
        }
        console.log(html);
        newsUl.innerHTML = html;
    }
</script>
</body>
</html>

3. 使用Hostbuddy

Hostbuddy可以更改域名，以不同的地址访问页面
这里写图片描述
当浏览器的域名和页面ajax请求路径是同源才能够获取router里的数据。

jsonp 跨域

利用script标签来加载js

router.js

app.get('/getNews', function (req, res) {
  var news = [
    "秦岭鳌太仍有23名驴友失联 两遇难者来自云南",
    "观察：谣言转发大户80%是中老年人 精神空虚是主因",
    "上海加码楼市调控 新盘销售由公证机构主持摇号",
   "28省份取消政府还贷二级公路收费 里程超14万公里",
   "北京多条主干道大树被风刮倒 北三环爆堵",
   "山东河南蒜苔滞销 万能“大数据”为何也束手无策？"
  ];
  var data = [];
  for(var i=0; i<3; i++) {
    var index = parseInt(Math.random()*news.length);
    data.push(news[index]);
    news.splice(index, 1);
  }
  var cb = req.query.callback;
  if (cb) {
    res.send(cb +'(' + JSON.stringify(data)+ ')'); // jsonp
  } else {
    res.send(data); // get
  }
});

index.html

var change = document.querySelector('.change');
var newsUl = document.querySelector('.news');
change.addEventListener('click', function () {

    var script = document.createElement('script');
    script.src = 'http://a.zj.com:8080/getNews?callback=appendHtml';
    document.head.appendChild(script);
    document.head.removeChild(script); // 加载后移除，否则每次请求head都会有script标签
});
function appendHtml(news) {
    var html = '';
    for (var i = 0; i < news.length; i ++) {
        html += '<li>' + news[i] + '</li>';
    }
    console.log(html);
    newsUl.innerHTML = html;
}

CORS跨域

CORS全称是跨域资源共享（Cross-Origin Resource Sharing），是一种Ajax跨域请求资源的方式，支持现代浏览器，IE支持10以上，IE8、9部分支持。
实现方式：
当你使用XMLHttpRequest发送请求时，浏览器发现该请求不符合同源策略，会给该请求加一个请求头：Origin，后台进行一些列处理，如果确定接受请求则在返回结果中加入一个响应头：Access-Control-All-Origin；浏览器判断该请求头中是否包含Origin的值，如果有则浏览器会处理响应，我们就可以拿到响应数据，如果不包含浏览器直接驳回，这时我们无法拿到响应数据。所以，CORS的表象是让你觉得它与同源的ajax请求无区别。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jsonp</title>
</head>
<body>
<ul class="news">
    <li>秦岭鳌太仍有23名驴友失联 两遇难者来自云南</li>
    <li>观察：谣言转发大户80%是中老年人 精神空虚是主因</li>
    <li>上海加码楼市调控 新盘销售由公证机构主持摇号</li>
</ul>
<button class="change">换一组</button>
<script>
    var change = document.querySelector('.change');
    var newsUl = document.querySelector('.news');
    change.addEventListener('click', function () {
        var xhr = new XMLHttpRequest();
        xhr.open('get','http://b.zj.com:8080/getNews', true);
        xhr.send();
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                appendHtml(JSON.parse(xhr.responseText));
            }
        };
    });
    function appendHtml(news) {
        var html = '';
        for (var i = 0; i < news.length; i ++) {
            html += '<li>' + news[i] + '</li>';
        }
        console.log(html);
        newsUl.innerHTML = html;
    }
</script>
</body>
</html>

router.js

app.get('/getNews', function (req, res) {
  var news = [
    "秦岭鳌太仍有23名驴友失联 两遇难者来自云南",
    "观察：谣言转发大户80%是中老年人 精神空虚是主因",
    "上海加码楼市调控 新盘销售由公证机构主持摇号",
   "28省份取消政府还贷二级公路收费 里程超14万公里",
   "北京多条主干道大树被风刮倒 北三环爆堵",
   "山东河南蒜苔滞销 万能“大数据”为何也束手无策？"
  ];
  var data = [];
  for(var i=0; i<3; i++) {
    var index = parseInt(Math.random()*news.length);
    data.push(news[index]);
    news.splice(index, 1);
  }

  res.header('Access-Control-Allow-Origin', '*');
  res.send(data);
});

终端中输入mock start启动服务
浏览器输入a.zj.com:8080，而请求数据的地址为b.zj.com:8080/getNews，说明跨域请求成功
控制台中Response请求头中有Access-Control-Allow-Origin：*，*表示允许任何请求
这里写图片描述
可以指定为某url：

res.header('Access-Control-Allow-Origin', 'http://a.zj.com:8080');

这里写图片描述

虚年
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
跨域请求资源-jsonp和cors区别.pdf
04-09
JavaScript出于安全方面的考虑，不允许跨域调用其他页面的对象。那什么是跨域呢，简单地理解就是因为JavaScript同源策略的限制，a.com域名下的js无法操作b.com或是c.a.com域名下的对象。 当协议、子域名、主域名、...
跨域解决之JSONP和CORS的详细介绍
01-19
JSONP跨域和CORS跨域 什么是跨域？ 跨域：指的是浏览器不能执行其它网站的脚本，它是由浏览器的同源策略造成的，是浏览器的安全限制！ 同源策略 同源策略：域名、协议、端口均相同。 浏览器执行JavaScript脚本时，会...
cors跨域（以及和jsonp的区别）
qq_33562825的博客
03-07 3574
上次我们说到，jsonp只支持get方式跨域，不支持post，是因为底层是使用script标签去接受请求，jsonp通过给script的src中的url设置回调函数，传给服务端后，服务端返回一个回调函数的调用，把数据包在这个回调函数里面，然后我们在全局中定义一下这个回调函数准备解析数据就好了。 现在假设我要跨域，同时跨域的时候传递的数据非常多，get对数据大小又有限制，用get就不靠谱，必须使用支持
前端常用的几种跨域通信方式实践：jsonp&cors&postMessage&改域
flying meng的菜鸟居
11-27 1533
为什么说是“ 前端 ”“ 跨域 ” ？ 跨域方式有三种：jsonp、cors，以及动态代理。 相比之“基于”前端的前两种方法，最后一种不太常用 —— 没错，cors一般来讲是后端设置，但是完全可以让前端“一力以担之”。 前文推荐（不了解“跨域”的可以先看这里）： https://blog.csdn.net/qq_43624878/article/details/95853615 jsonp方式解决...
跨域通信的几种方式（jsonp,hash,postMessage,websocket,cors）
DLGDark的博客
10-01 1144
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>通信类</title> </head> <body> <script type="text/javascript"> // 创建ajax【参考网址】https://segmentfault.com/a/1190000006669043
js跨域总结（jsonp，postMessage，CORS）
lululul123的博客
08-02 2258
跨域 当协议，子域名，主域名，端口中任何一个不相同的时候，都算做不同域。不同域之间相互请求资源，就是属于跨域。Js处于安全方面考虑，不允许跨域调用其他页面的对象。 简单的说，跨域因为js同源策略的限制。a.com域名下的js无法操场b.com或c.a.com域下的对象。 现实生活中，一个公司有多个子公司，或者一个公司和另一个公司合作。这就不可避免的要出现跨域情况。 为了在必要的时候实现跨域
跨域 - JSONP
qq_40147756的博客
12-26 913
jsonp 的原理和实现
JS跨域常见的三种方法---JSONP、CORS、postMessage
qq_40436793的博客
08-08 681
一、JSONP 1. JSONP原理： （1）不存在跨域请求限制的标签：img、script、link、iframe、form，JSONP正是利用script标签的该特性实现跨域 （2）JSONP利用<script>标签不受跨域请求限制的特性，向服务器发送请求，并且将回调函数传递给服务器；服务器收到请求和函数后，以json格式作为回调函数的参数传递给它，也就是用json数据来填充回调函数，并返回数据到客户端；客户端收到服务器响应后执行回调函数，该回调函数可以用来处理服务器的返回数据。 2
跨域请求的处理-jsonp、cors
mantou_riji的博客
05-14 753
文章目录同源策略跨域跨域的解决jsonpjsonp定义jsonp工作方式jsonp的使用jsonp实现跨域请求实例jQuery发送jsonp请求CORS解决跨域请求CORS是什么?CORS怎么工作的?使用cors实现ajax的跨域请求补充：所有响应头种类见这里 同源策略 同源策略是浏览器的一种安全策略。 同源策略：即 网页的url 和 该网页请求的url 的协议、域名、端口必须保持一致。 协议、域名、端口必须保持一致就是说网页的加载服务器和页面请求的请求服务器是同一个服务器的同一个服务。 ajax默认支持同
解决跨域的两种方法JSONP/CORS
水滴的专栏
02-27 586
跨域问题 浏览器的同源策略导致了跨域问题 同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。 同源 如果两个页面的协议，端口（如果有指定）和域名都相同，则两个页面具有相同的源 下表给出了相对http://store.company.com/dir/page.html同源检测的示例: URL 结果 原因 h...
详解跨域（JSONP和CORS）
最新发布
o0way0o的博客
02-03 1695
同源策略(Same Origin Policy): 同源是指域名，协议，端口完成一致，那么这两个url就是同源。同源策略是一种约定，它是浏览器最核心也最基本的安全功能，也是浏览器故意设置的一个功能限制。如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。使用代码window.origin或者location.origin可以获取当前的源。源 = 协议+域名+端口号。
跨域问题--jsonp&cors
ShuaideryiP的博客
09-18 141
1. 跨域访问接口-整体说明 跨域问题是我们前端开发中经常会遇到的问题，也是面试中的高频题。通过这一节的学习，我们就能解决这类问题啦。 主要内容： 素材准备 错误原因分析 用JSONP来解决 用CORS来解决 2. 跨域-素材准备及错误展示 2.1 目录结构 |-public |-------index.html |-server.js 2.2 前端页面 public/index.html <!DOCTYPE html> &lt...
js实现跨域的几种方法汇总（图片ping、JSONP和CORS）
11-22
虽然有同源策略的存在，但是在js中跨域也依然很常见，有document.domain、window.name、图片ping、jsonp、CORS，在这里简单总结下图片ping、jsonp和CORS备忘。 图片ping 图片可以从任何URL中加载，所以将img的src...
SpringBoot跨域Jsonp和Cors的方法
10-16
主要介绍了SpringBoot跨域Jsonp和Cors的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
同源策略+跨域+jsonp+cors
08-29
同源策略和跨域以及解决跨域的两种方式
vue中禁止ios浏览器页面滚动的橡皮筋效果
热门推荐
m0_37068028的博客
05-03 1万+
在iPhone浏览器上滚动页面时，页面出现了橡皮筋效果 layout.vue &lt;template&gt; &lt;div class="layout"&gt; &lt;header&gt;&lt;/header&gt; &lt;router-view/&gt; &lt;footer&gt;&lt;/footer&amp
vue组件 组件的继承extend
m0_37068028的博客
04-05 1万+
vue组件 组件的继承 import Vue from 'vue' const component = { data () { return { text: 111 } }, props: { propOne: String }, mounted () { console.log('component1 mounted') },...
ES6模板字符串replace实现
m0_37068028的博客
11-08 9362
ES6模板字符串 const obj = { name: 'zj', age: 18 } const str = `我的名字叫${obj.name}，今年${obj.age}岁` console.log(str) 模板字符串replace实现 function replace(desc) { return desc.replace(/\$\{([^}]+)\}/, function ...
vue 数据绑定-动态样式
m0_37068028的博客
04-04 6588
vue 数据绑定-动态样式 动态class名绑定的几种方式 1. 对象方式 new Vue({ el: '#root', template: `&lt;div :class="{active: isActive"&gt;&lt;/div&gt;`, data () { return { isActive: true } } }) 数组内对象 ...
使用vue-jsonp还会cors
03-22
跨域资源共享（CORS）是浏览器的一种安全策略，用于限制跨域请求。而vue-jsonp是一种跨域请求的解决方案，它通过动态创建script标签，利用浏览器对script标签的跨域请求不受限制的特性，来实现跨域请求。因此，使用...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值