什么是跨域？如何实现？
什么是跨域？如何实现？
-
🔍什么是跨域？
浏览器从一个电脑端口访问另一个端口或另一个服务器是会有限制，请求的协议，端口，域名的任意一个不同都会有限制，解决这个限制就是跨域，尤其是前后端分离的页面很常见。 -
🔍有什么限制？
- 不能操作DOM树
- 不能获取Cookie（不是饼干哦），LocalStorage(网页缓存)等
- 不能发送AJAX请求
-
🔍有哪些跨域的方式？
- JSONP
- 修改响应头(Node)
- .....
一、 JSONP跨域
1、⚗原生JS实现JSONP
通过script img等标签完成请求数据。
发送格式如：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
hello
<script>
function fun(data) {
alert(data)
}
</script>
// 发送请求
<script src="http://locallhost:91?callback=fun"></script>
// 上面的script相当于一下的代码：因为后端获取的是要执行的函数
// fun('你好')
</body>
</html>
后端处理收到的是一个函数(这里用express写了一个简单接口)，给前端打包好了运行的函数
var express = require('express');
express.get('/',function(req,res){
var funcname = req.query.callback;
res.send(fun+"('你好')") // fun('你好')
})
express.listen(91);
所以在前端定义好这个函数即可
2、Vue实现跨域
this.$http.json('http://www.admin.com:91/login', {
praams: {},
jsonp: 'handleCallback'
}).then((res) => {
console.log(res);
})
二、修改响应头(Node)
基本思想是用Node修该请求头。
文件目录：
var express = require('express');
var app = express(); // {1}
app.use(express.static(__dirname)) // {2}
app.listen(90)
var app2 = express(); // {3}
app2.get('/', function (req, res) {
res.header("Access-Control-Allow-Origin","*") // {4}
res.send('hi')
})
app2.listen(91)
这里用Node创建了简单的两个服务(90端口和91端口), 创建的app{1}端口没有get请求这时候默认访问的就是根目录下的index.html文件html的内容如下👇，所以这个html文件就是运行90端口上的。里面的javascript就是访问91端口的内容。
如果这样访问92端口不能直接访问的，所以我们在配置92端口设置请求头为任意值可以正常访问！
<!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>
<h1>hello </h1>
<script>
fetch("http://localhost:91/")
.then(res=>res.text())
.then(data=>{alert(data)});
</script>
</body>
</html>
参考:
- [1] [MDN](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS)
