1.跨域
1.什么是跨域
- 不同域名
- 同域不同端口
http://www.a.com/a.js http://www.a.com/b.js 同一域名下 允许
http://www.a.com/lab/a.js http://www.a.com/script/b.js 同一域名下不同文件夹 允许 http://www.a.com:8000/a.js http://www.a.com/b.js 同一域名,不同端口 不允许
http://www.a.com/a.js https://www.a.com/b.js 同一域名,不同协议 不允许
http://www.a.com/a.js http://70.32.92.74/b.js 域名和域名对应ip 不允许
http://www.a.com/a.js http://script.a.com/b.js 主域相同,子域不同 不允许(cookie这种情况下也不允许访问)
http://www.a.com/a.js http://a.com/b.js 同一域名,不同二级域名(同上) 不允许(cookie这种情况下也不允许访问)
http://www.cnblogs.com/a.js http://www.a.com/b.js 不同域名 不允许
2.静态资源的使用CORS共享
跨域资源共享(CORS) 是一种机制,它使用额外的 HTTP 头来告诉浏览器 让运行在一个 origin (domain) 上的 Web 应用被准许访问来自不同源服务器上的指定的资源。
当一个资源从与该资源本身所在的服务器不同的域、协议或端口请求一个资源时,资源会发起一个跨域 HTTP 请求。
比如:
站点 http://domain-a.com
的某 HTML 页面通过 <img>
的 src 请求 http://domain-b.com/image.jpg
。
网络上的许多页面都会加载来自不同域的 CSS 样式表,图像和脚本等资源。
CORS 分为"简单请求"以及"预检请求":
- 简单请求 使用下列方法之一:
-
GET
-
POST
-
HEAD 以及满足 Fetch 规范定义了对 CORS 安全的首部字段集合,不得人为设置该集合之外的其他首部字段。 而且 Content-Type 的值仅为下列三者之一:
-
text/plain
-
multipart/form-data
-
application/x-www-form-urlencoded
- 非简单请求的方法 2.1 预检请求 与上述简单请求不一样."需预检的请求"要求必须首先使用 OPTIONS 方法发起一个预检请求到服务器, 以获知服务器是否允许该实际请求。"预检请求"的使用,可以避免跨域请求对服务器的用户数据产生未预期的影响。 当满足以下任一条件时,即应首先发送预检请求:
人为设置了对 CORS 安全的首部字段集合之外的其他首部字段。 非简单请求的 Content-Type 请求中的XMLHttpRequestUpload 对象注册了任意多个事件监听器。 请求中使用了ReadableStream对象。 另外,还有附带身份验证的请求,也就是携带 cookies. 这个需要前端在请求实例中设置:
// 将 XMLHttpRequest 的 withCredentials 标志设置为 true
const xml = new XMLHttpRequest();
xml.withCredentials = true;
// ...
这时,后端需要作出相应的设置
Access-Control-Allow-Credentials: true
3.脚本内发起的跨源
出于安全原因,浏览器限制从脚本内发起的跨源 HTTP 请求。
例如,XMLHttpRequest 和 Fetch API 遵循同源策略。
这意味着使用这些 API 的 Web 应用程序只能从加载应用程序的同一个域请求 HTTP 资源,除非响应报文包含了正确 CORS 响应头。
4.实测总结
一般 <img>
, <script>
默认都支持跨域访问,只有在http 和https 下不能互相问题。
接口网络请求都会有跨域问题。
5.场景
1.简单场景
127.0.0.1:3000 访问 127.0.0.1:4000 发生跨域,这时候其实是浏览器同源问题,服务器其实可以正常响应
解决方案:
//4000的服务器只要启动下面代码
res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000')
//3000的服务器就可以正常访问4000
2.预检请求场景
客户端设置了headers的X-Token 会启动-预检请求
axios.get("/api/users", {headers:{'X-Token':'jilei'}})
- 客户端会发送请求方法为options 的/api/users请求
- 服务端需要应答并返回合法信息,才能正常访问下一步请求,代码如下
if (method == "OPTIONS" && url == "/api/users") {
res.setHeader('Access-Control-Allow-Credentials', 'true');
res.writeHead(200, {
"Access-Control-Allow-Origin": "http://localhost:3000",
"Access-Control-Allow-Headers": "X-Token,Content-Type",
"Access-Control-Allow-Methods": "PUT"
});
res.end();
}
- 最后客户端才正常请求get的/api/users
3.跨域保存cookies场景
//ajax客户端请求地方,添加
axios.defaults.withCredentials = true
//node服务器 OPTIONS应答加上
res.setHeader('Access-Control-Allow-Credentials', 'true');
//node测试代码
console.log('cookie',req.headers.cookie)//查看上一次cookies是否有返回
res.setHeader('Set-Cookie', 'cookie1=va222;')//设置cookies
4.无刷新简易埋点
//同时兼容跨域问题
const img = new Image()
img.src='/api/users?abc=123'
2.代理
1.正向代理
在以前电话拨号上网的年代
- 公司内部个人pc -> 公司公用代理软件 -> 电话线 -> 服务器 -》 单一的服务
- 公司公用代理软件可以有效缓存访问过的内容,以节省下个人访问一样的内容
2.反向代理
现在的高速网络年代
- 公司内部个人pc -> 5G -> 服务器 -> (前端 + 后端 + 多台分布式服务器)
- 由于网速飞快已经不需要公用的软件代理,
- 反而是服务器由于越多越多应用,但是对外又只能有一个端口比如说80,
- 这时候就需要用反向代理把多个内容反向成一个给客户端
常用方案
- node
- vue实现代理
- nginx
- nuxt
10种方式
常用 4 种
- 跨域资源共享(CORS)
- nginx代理跨域
- nodejs中间件代理跨域
- 浏览器屏蔽安全校验
不常用 6 种
- 通过jsonp跨域
- postMessage跨域
- WebSocket协议跨域
- document.domain + iframe跨域
- location.hash + iframe
- window.name + iframe跨域
1. 后端配置 跨域资源共享(CORS)
- 需要服务端设置Access-Control-Allow-Origin 为 *
- 如果客户端需要使用cookies ,则需要设置axios.defaults.withCredentials = true
2. nginx代理跨域
通过nginx代理到同一个域名和端口下面访问。
server {
listen 80;
server_name localhost;
location / {
root /var/www/html;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
location /api {
proxy_pass http://127.0.0.1:3000;
proxy_redirect off;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
}
通过nginx代理到另外一台ip+端口下,同时打开 跨域授权访问。 127.0.0.1:80 访问 127.0.0.1:8081
server {
listen 80;
server_name localhost;
location / {
root /var/www/html;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
}
server {
listen 8081;
server_name localhost;
add_header Access-Control-Allow-Origin *; # 这里放开
add_header Access-Control-Allow-Headers X-Requested-With;
add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
location /api {
proxy_pass http://127.0.0.1:3000;
proxy_redirect off;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
}
3.vue 中间件代理跨域
通过本地启动服务A ,把要请求B内容转发到本地的服务A,后面所有处理都在A上面执行。原理跟nginx方向代理类似。
//vue.config.js
devServer: {
disableHostCheck: true,
compress: true,
port: 5000,
proxy: {
'/api/': {
target: 'http://localhost:4000', //注意这里只设置ip和端口,不要加任何后缀地址信息
changeOrigin: true,
pathRewrite: { //重写替换的url请求的前缀
'^/api': '' //因为api 在真实接口一般不存在建议 去除掉
}
},
},
}
3.node项目 代理实现
express
var express = require('express');
const proxy = require('http-proxy-middleware')
const app = express()
app.use(express.static(__dirname + '/'))
app.use('/api', proxy({ target: 'http://localhost:4000', changeOrigin: false }));
module.exports = app
nuxt代理设置
//nuxt.config.js
modules: [
'@nuxtjs/proxy' //新增代理设置
],
proxy:{
"/api/":{
target:"http://localhost:7001",
secure:false,
pathRewrite:{
'^/api':""
}
}
}
4. 浏览器屏蔽安全校验
- 谷歌浏览器直接屏蔽跨域 mac
open -n /Applications/Google\ Chrome.app/ --args --disable-web-security --user-data-dir=/Users/jason_pro/Documents/ChormConfig
- 谷歌浏览器屏蔽跨域 windows
谷歌快捷键-> 属性-> 目标 -> C:\Users\xxxxxx\AppData\Local\Google\Chrome\Application\chrome.exe --disable-web-security --user-data-dir=d:\MyChromeDevUserData
5. 通过jsonp跨域
通过动态创建script,再请求一个带参网址实现跨域通信。 需要服务端生成对应的js代码。客户端通过
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = ''//服务端返回js
6. postMessage跨域
postMessage是HTML5中的API,支持弹出窗,多窗口,多iframe数据交互
- postMessage(data,origin)方法接受两个参数
- data: 可以是对象或字符串,部分浏览器只支持字符串
- origin: 协议+主机+端口号,也可以设置为"*",表示可以传递给任意窗口,如果当前同源设置为"/"。
//a.html:http://www.demo1.com/a.html
<iframe id="iframe" src="http://www.demo2.com/b.html" style="display:none;"></iframe>
<script>
var iframe = document.getElementById('iframe');
iframe.onload = function() {
var data = {
name: 'xxx'
};
// 向domain2传送跨域数据
iframe.contentWindow.postMessage(JSON.stringify(data), 'http://www.demo2.com');
};
// 接受domain2返回数据
window.addEventListener('message', function(e) {
alert('data from demo2 ---> ' + e.data);
}, false);
</script>
// b.html:http://www.demo2.com/b.html
<script>
// 接收domain1的数据
window.addEventListener('message', function(e) {
alert('data from demo1 ---> ' + e.data);
var data = JSON.parse(e.data);
if (data) {
data.number = 16;
// 处理后再发回domain1
window.parent.postMessage(JSON.stringify(data), 'http://www.demo1.com');
}
}, false);
</script>
7. WebSocket协议跨域
- WebSocket protocol是HTML5新协议。实现浏览器与服务器全双工通信,支持跨域,可以使用第三方库Socket.io
- a.html 注册socket服务c,跨域b.html 也注册socket服务c。
- 通过服务端同时推送消息给 a 和 b ,实现跨域数据传输,原理跟聊天室有点类似
//服务c node.js http://api.baidu.com:3000
const express = require('express')()
const http = require('http').Server(express)
const socketIO = require("socket.io")(http)//由于参数只能是http 需要转换为传统的 http库
socketIO.on('connection', (socket) => { //每个打开页面的用户连接后的 闭包处理
// socket 为当前打开页面的客户端
//添加监听到消息方法
socket.on("chat message", (msg)=> {
//发送广播给所有人
socketIO.emit("chat message",msg);
})
socket.on("disconnection", () => {
console.log("链接已断开")
})
})
// 注意使用的是 http启动 应为stocketIO绑定在http上
http.listen(3000,()=> {
console.log("启动3000 成功")
})
a.html www.demo1.com/a.html
<!DOCTYPE html>
<html>
<head>
<title>Socket.IO chat</title>
</head>
<body>
<ul id="messages"></ul>
<form action="">
<input id="m" /><button>Send</button>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js"></script>
<script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
<script>
$(function() {
var socket = io("api.baidu.com:3000");
$("form").submit(function(e) {
e.preventDefault(); // 避免表单提交行为
socket.emit("chat message", $("#m").val());
$("#m").val("");
return false;
});
socket.on("chat message", function(msg) {
$("#messages").append($("<li>").text(msg));
});
});
</script>
</body>
</html>
b.html :www.demo2.com/b.html
<!DOCTYPE html>
<html>
<head>
<title>Socket.IO chat</title>
</head>
<body>
<ul id="messages"></ul>
<form action="">
<input id="m" /><button>Send</button>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js"></script>
<script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
<script>
$(function() {
var socket = io("api.baidu.com:3000");
$("form").submit(function(e) {
e.preventDefault(); // 避免表单提交行为
socket.emit("chat message", $("#m").val());
$("#m").val("");
return false;
});
socket.on("chat message", function(msg) {
$("#messages").append($("<li>").text(msg));
});
});
</script>
</body>
</html>
8 document.domain + iframe跨域
只能在主域相同,子域不同的跨域应用场景。 如: www.baidu.com , api.baidu.com A父窗口 :www.baidu.com
<iframe id="iframe" src="http://www.baidu.com/b.html"></iframe>
<script>
document.domain = 'baidu.com';
var user = 'admin';
</script>
B子窗口: api.baidu.com
<script>
document.domain = 'baidu.com';
// 获取父窗口中变量
alert('get js data from parent ---> ' + window.parent.user);//可以直接通过parent访问
</script>
9. location.hash + iframe
通过A和B是跨域关系,A和C是同域,
- A直接用iframe给B发送hash。
- B通过C做中间人,传消息给A
- A页面通过url的hash传值给B页面,同时留有被C调用的公用方法
- B页面一直监听hash变化,传入内嵌的C页面
- C页面一直监听hash变化,并且直接调用parent.parent 告诉A页面
相关代码
1.)a.html:www.domain1.com/a.html
<iframe id="iframe" src="http://www.demo2.com/b.html" style="display:none;"></iframe>
<script>
var iframe = document.getElementById('iframe');
// 向b.html传hash值
setTimeout(function() {
iframe.src = iframe.src + '#user=admin';
}, 1000);
// 开放给同域c.html的回调方法
function onCallback(res) {
alert('data from c.html ---> ' + res);
}
</script>
2.)b.html:www.demo2.com/b.html
<iframe id="iframe" src="http://www.demo1.com/c.html" style="display:none;"></iframe>
<script>
var iframe = document.getElementById('iframe');
// 监听a.html传来的hash值,再传给c.html
window.onhashchange = function () {
iframe.src = iframe.src + location.hash;
};
</script>
3.)c.html:www.demo1.com/c.html
<script>
window.onhashchange = function () {
window.parent.parent.onCallback('hello: ' + location.hash.replace('#user=', ''));
};
</script>
10 window.name + iframe跨域
- window.name 在不同的页面 不同域名 加载后依旧存在,2M左右
- a.html 通过iframe 先访问跨域b.html,再访问 同域的proxy.html,这时就可以通过 iframe.contentWindow.name获取。
步骤
- b.html 设置window.name = 'xxxxx',记录要传给a.html的内容
- a.html 创建ifrme 访问跨域的 b.html,
- 加载完b.html后,再加载同域的 proxy.html页面,
- 这时候就可以通过 iframe.contentWindow.name 访问b.html 的name内容。
//a.html:http://www.demo1.com/a.html
var proxy = function(url, callback) {
var state = 0;
var iframe = document.createElement('iframe');
// 加载跨域页面
iframe.src = url;
// onload事件会触发2次,第1次加载跨域页,并留存数据于window.name
iframe.onload = function() {
if (state === 1) {
// 第2次onload(同域proxy页)成功后,读取同域window.name中数据
callback(iframe.contentWindow.name);
} else if (state === 0) {
// 第1次onload(跨域页)成功后,切换到同域代理页面
iframe.contentWindow.location = 'http://www.demo1.com/proxy.html';
state = 1;
}
};
document.body.appendChild(iframe);
};
// 请求跨域b页面数据
proxy('http://www.demo2.com/b.html', function(data){
alert(data);
});
//poxy.html: http://www.demo1.com/proxy.html
//代理页面,内容为空 与 b同域
//b.html: http://www.demo2.com/b.html
<script>
window.name = 'xxxx';
</script>