什么是跨域
跨域指JS不能访问和操作其他域下的资源。它是由浏览器的同源策略造成的，为的是加强浏览器的安全性。
同源策略：协议、域名、端口相同。
同源策略限制以下几种行为：
1.) Cookie、LocalStorage 和 IndexDB 无法读取
2.) DOM 和 Js对象无法获得
3.) AJAX 请求不能发送
解决方法
-
JSONP: 利用 <script><img><iframe> 等标签不受同源策略限制，可以从不同的域加载并执行资源的特性，来实现数据跨域传输。
优点：它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的 限制；它的兼容性更好，在更加古老的浏览器中都可以运行。
缺点：它只支持 GET 请求，而不支持 POST 请求等其他类型的 HTTP 请求。 -
跨域资源共享（CORS）Cross-Origin Resource Sharing
在目标域返回的HTTP头来授权是否允许跨域访问。
response.addHeader(‘Access-Control-Allow-Origin:*’);//允许所有来源访问
response.addHeader(‘Access-Control-Allow-Method:POST,GET’);//允许访问的方式
- ngnix反向代理
部分代码：
http {
...
server{
listen 9001;#本地的端口号
server_name localhost;
location / {
proxy_pass https://your_website.com;#需要反向代理的网站
add_header Access-Control-Allow-Origin *; # *代表都可以访问，也可以指定域名
}
}
}
这样配置后，本地访问localhost:9001，就和访问https://your_website.com一样
- postMessage
postMessage常用于，本页面和通过本页面window.open打开的页面进行通讯，或者本页面和他内嵌的iframe进行通讯。
简单用法：
parent page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<iframe src="./child.html" id="child-frame"></iframe>
<button id="btn">click me</button>
i am parent
<script>
window.onload =function () {
var childIframe = document.getElementById('child-frame')
var contentWindow = childIframe.contentWindow
document.getElementById('btn').onclick = function () {
contentWindow.postMessage("from parent", '*')
// contentWindow.postMessage("from parent", 'http://localhost:63344')
}
}
</script>
</body>
</html>
child page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>i am child</div>
<script>
window.onload = function () {
window.addEventListener("message", function (event) {
console.log(event, event.data)
}, false);
}
</script>
</body>
</html>
网友评论