html跨域请求（html5新增的跨域解决方案）
华为云服务器特价优惠火热进行中！ 2核2G2兆仅需 38 元；4核4G3兆仅需 79 元。购买时间越长越优惠！更多配置及优惠价格请咨询客服。
合作流程： |
本篇文章给大家谈谈html跨域请求，以及html5新增的跨域解决方案对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。
微信号：cloud7591如需了解更多，欢迎添加客服微信咨询。
复制微信号
本文目录一览：
- 1、html跨域请求怎么写？
- 2、html跨域访问本地文件在哪
- 3、什么是跨域、怎么解决跨域？
- 4、前端web开发html如何避免js的跨域访问
- 5、如何跨域获取远程html页的纯json数据并本地调用
html跨域请求怎么写？
JSONP
proxy代理
cors
xdr
由于浏览器同源策略，凡是发送请求url的协议、域名、端口三者之间任意一与当前页面地址不同即为跨域。
html跨域访问本地文件在哪
需要准备的材料分别有：电脑、浏览器、html编辑器。1、首先，打开html编辑器，新建html文件，例如：index.html。2、在index.html中的
标签中，输入html代码：
点击打开本地文件
。3、浏览器运行index.html页面，点击超链接。4、此时成功打开了本地的“test.txt”文件。
什么是跨域、怎么解决跨域？
一个请求url的** 协议、端口、域名 **其中任意一个与当前页面url不相同就是跨域
即： （http/https）协议、（segmentfault）主域名、（www）子域名、（8080）端口
是因为浏览器的同源策略的限制，同源策略是一种安全策略，同源指的是域名，协议，端口相同，会阻止一个域的js脚本和另一个域的内容进行交互。防止在一个浏览器中的两个页面产生不安全、异常的行为。
当然如果不同源的话会产生一定的限制：
【1】无法读取非同源网页的 Cookie、LocalStorage 和 IndexedDB
【2】无法接触非同源网页的 DOM
【3】无法向非同源地址发送 AJAX 请求
document.createElement(‘script’) 生成一个 script 标签，然后插 body 里而已。
JSONP的实现原理就是创建一个script标签, 再把需要请求的api地址放到src里. 这个请求只能用GET方法, 不可能是POST（向服务端传送数据）。
一种非正式传输协议，它会允许用户传递一个callback参数给服务端，然后服务端返回数据的时候会将这个callback参数作为函数名来包裹住JSON数据，然后客户端就可以随意的定义自己的函数来处理返回的数据了。
一般是后端在处理请求数据的时候，添加允许跨域的请求头信息，服务端设置Access-Control-Allow-Origin就可以，如果需要携带cookie，前后端都需要设置
window对象有个name的属性，在一个window下，窗口载入的页面都是共享一个window.name。
在a.html中，怎么把b.html页面加载进来，获取b.html的数据。在a.html页面使用iframe，可以去获取b.html的数据，然后在a.html页面中取得iframe获取得数据。
但是iframe想要获取b.html中的数据，只需要给这个iframe的src设为就可以，如果a.html想要得到iframe所获得的数据，也就是iframe的window.name的值，还要把这个iframe的src设成跟a.html页面同一个域才可以，不然a.html访问不到iframe里的window.name属性。
// 父窗口打开一个子窗口
var openWindow = window.open('', 'title');
// 父窗口向子窗口发消息(第一个参数代表发送的内容，第二个参数代表接收消息窗口的url)
openWindow.postMessage('Nice to meet you!', '');
调用message事件，监听对方发送的消息
// 监听 message 消息
window.addEventListener('message', function (e) {
console.log(e.source); // e.source 发送消息的窗口
console.log(e.origin); // e.origin 消息发向的网址
console.log(e.data); // e.data 发送的消息
},false);
server{
# 监听9099端口
listen 9099;
# 域名是localhost
server_name localhost;
#凡是localhost:9099/api这个样子的，都转发到真正的服务端地址
location ^~ /api {
proxy_pass ;
}
}
// 请求的时候直接用回前端这边的域名，这就不会跨域，然后Nginx监听到凡是localhost:9099/api这个样子的，都转发到真正的服务端地址
fetch('', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({
msg: 'helloIframePost'
})
})
前端web开发html如何避免js的跨域访问
前端web开发html避免js的跨域访问的方法是后台服务端做域配置兼容处理。
1、在server端请求过滤的时候加入以下控制：
httpProtocol
customHeaders
add name="Access-Control-Allow-Origin" value="*" /
/customHeaders
/httpProtocol
Access-Control-Allow-Origin这个属性配置成*就表示接受任何域过来的请求
2.ajax中请求如下：
$.ajax({
xhrFields: {
withCredentials: true
},
data:{ my: 'a' },
url: '', 这里是跨域访问
type: 'POST'
})
如何跨域获取远程html页的纯json数据并本地调用
那就用ajax中jonsp，这个是可以跨域请求的。
script type="text/javascript" src="jquery.js"/script
script type="text/javascript"
$.ajax({
url:"跨域访问地址",
dataType:'jsonp',
data:'',
jsonp:'callback',
jsonpCallback:"回调函数名称",
success:function(result) {
alert("调用成功！");
}
});
/script
jsonpCallback就是可以指定我们自己的回调方法名
关于html跨域请求和html5新增的跨域解决方案的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。
