摘要：同源策略做了很严格的限制，但是在实际的场景中，又确实有很多地方需要突破同源策略的限制，也就是我们常说的跨域。使用跨域由于同源策略，一般来说位于的网页无法与不是的服务器沟通，而的元素是一个例外。
本菜鸡最近在写某个页面请求数据时，报了如下的错误。
Failed to load https://...:
No "Access-Control-Allow-Origin" header is present on the requested resource.
Origin "http://127.0.0.1:7070" is therefore not allowed access.
了解原因后，得知是由于跨域请求导致的，学习了一下跨域及同源策略相关知识后，写了个demo玩玩
简单聊聊跨域要了解跨域，必须先了解浏览器同源策略，接下来搬运了一些大神的总结
什么是同源策略？同源策略/SOP（Same origin policy）是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。
同源策略限制以下几种行为：
1.Cookie、LocalStorage 和 IndexDB 无法读取 2.DOM 和 Js对象无法获得 3.AJAX 请求不能发送
假设没有同源策略，那么我在A网站下的cookie就可以被任何一个网站拿到；那么这个网站的所有者，就可以使用我的cookie(也就是我的身份)在A网站下进行操作。同源策略可以算是 web 前端安全的基石，如果缺少同源策略，浏览器也就没有了安全性可言。
同源策略做了很严格的限制，但是在实际的场景中，又确实有很多地方需要突破同源策略的限制，也就是我们常说的跨域。
跨域的方法有很多（如接下来要玩的jsonp跨域，还有cors跨域资源共享，反向代理等等）。
由于同源策略，一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通，而HTML的
我们可以直接拿来使用，配合jsonp就能实现跨域获取输入框内容相关热点数据并点击跳转了，具体实现请看Github项目源码
实现效果：
页面结构非常简单，如图:
jsonp跨域实现代码
document.onkeyup = function () {
var val = text.value
var script = document.createElement("script")
script.src = `https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=${val}&cb=dosomething`;
document.body.appendChild(script)
}
function dosomething (data) {
var oUl = document.querySelector("#lists ul")
oUl.innerHTML = ""
data.s.map(function (html) {
var oLi = document.createElement("li")
oLi.innerHTML = html
oLi.onclick = function () {
window.location.href = `http://www.baidu.com/s?wd=${html}`
}
oUl.appendChild(oLi)
})
}
仅仅是一个利用jsonp实现跨域的简单小demo，便于和我一样的新手学习，其它结构和样式文件就不一一列出来了，可以到我下载我的完整项目查看
完整项目地址：Github:baidu_demo
参考文章：
前端常见跨域解决方案（全）
JSONP和CORS实现跨源请求
再也不学AJAX了！（三）跨域获取资源 ② - JSONP & CORS
jsonp跨域请求详解——从繁至简
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/116758.html
摘要：同源策略做了很严格的限制，但是在实际的场景中，又确实有很多地方需要突破同源策略的限制，也就是我们常说的跨域。使用跨域由于同源策略，一般来说位于的网页无法与不是的服务器沟通，而的元素是一个例外。 本菜鸡最近在写某个页面请求数据时，报了如下的错误。 Failed to load https://...:No Access-Control-Allow-Origin header is pre...
摘要：同源策略做了很严格的限制，但是在实际的场景中，又确实有很多地方需要突破同源策略的限制，也就是我们常说的跨域。使用跨域由于同源策略，一般来说位于的网页无法与不是的服务器沟通，而的元素是一个例外。 本菜鸡最近在写某个页面请求数据时，报了如下的错误。 Failed to load https://...:No Access-Control-Allow-Origin header is pre...
摘要：四跨域攻击跨域攻击可以理解为诱导受害者访问非法网站，黑客利用受害者的会话信息模拟请求，以达到篡改数据的目的。我们在百度上搜索一些关键字之后，访问其他网站时例如会发现，为何我刚刚搜索的关键字图片会在网页上显示那很有可能放置了百度的脚本代码。 本人工作中偶尔会和浏览器打交道，也遇到过一些坑，在此分享一下网页跨域访问的相关场景和知识，希望对读者有帮助。本文来自于我的博客网站：www.51th...
摘要：四跨域攻击跨域攻击可以理解为诱导受害者访问非法网站，黑客利用受害者的会话信息模拟请求，以达到篡改数据的目的。我们在百度上搜索一些关键字之后，访问其他网站时例如会发现，为何我刚刚搜索的关键字图片会在网页上显示那很有可能放置了百度的脚本代码。 本人工作中偶尔会和浏览器打交道，也遇到过一些坑，在此分享一下网页跨域访问的相关场景和知识，希望对读者有帮助。本文来自于我的博客网站：www.51th...
阅读 2204·2021-11-22 12:01
阅读 1680·2021-11-12 10:34
阅读 4186·2021-09-22 15:47
阅读 2596·2019-08-30 15:56
阅读 2720·2019-08-30 15:53
阅读 2275·2019-08-30 13:53
阅读 3216·2019-08-29 15:35
阅读 2997·2019-08-29 12:27
