1. 跨域是什么
跨域本质是 浏览器基于同源策略的一种基本安全手段。同源策略就是一种约定是浏览器最基本的安全功能。同源是指在同一个域(协议、主机、端口相同),当其中一项不相同时,就会产生跨域问题。
2. 解决方法
- 通过jsonp跨域;
- document.domain+iframe跨域;
- location.hash+iframe;
- window.name+iframe跨域;
- postMessage跨域;
- 跨域资源共享(CORS);
- nginx代理跨域;
- nodejs中间件代理跨域;
- WebSocket协议跨域。
- JSONP
通过动态创建script标签,通过script标签src请求没有域限制来获取资源;在html页面中,将script标签地址改为后端接口,网页通过添加
<scritp>
元素,向服务器请求JSON数据,这种做法不受同源策略限制;服务器收到请求后,将数据放在在一个指定名的回调函数里传回来。
缺点: JSONP只能get请求。
原生JS实现:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function fn(data) {
console.log(data);
console.log(data.msg);
}
</script>
<!-- 函数的声明要放在请求之上 -->
<script src="http://127.0.0.1:3000?callback=fn"></script>
</body>
</html>
const http = require("http");
const hostname = "127.0.0.1";
const port = 3000;
const server = http.createServer((req, res) => {
res.statusCode = 200;
res.setHeader("Content-Type", "text/plain");
// 响应数据
// 响应的数据必须是JSON格式
// 响应的数据作为调用的函数的参数传递
res.end('fn({"msg":"Hello world"})');
});
server.listen(port, hostname, () => {
console.log(`Server running at http://${hostname}:${port}/`);
});
- CORS"跨域资源共享"(Cross-origin resource sharing)
CORS需要浏览器和服务器同时支持才能实现跨域请求,除IE10以下的浏览器外的浏览器都支持。CORS的整个过程都由浏览器完成,前端无需做任何配置;只要服务器实现CORS接口,就可以实现跨域通信。
var express = require('express');
var app = express();
var allowCrossDomain = function (req, res, next) {
res.header('Access-Control-Allow-Origin', 'http://localhost:3001');
res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
res.header('Access-Control-Allow-Headers', 'Content-Type');
next();
}
app.use(allowCrossDomain);
- Nginx反向代理
- nginx模拟一个虚拟服务器,因为服务器与服务器之间是不存在跨域的;
- 发送数据时 ,客户端->nginx->服务端;
- 返回数据时,服务端->nginx->客户端。