咱们做前端的,平时跟后端对接接口那是必须的事情,但是可能很多同学忽略了一个对接过程中可能会发生的问题——跨域,那跨域到底是啥呢?为什么会跨域呢?又怎么才能解决呢?
为什么跨域?
为什么会出现跨域问题呢?那就不得不讲浏览器的同源策略了,它规定了协议号-域名-端口号
这三者必须都相同
才符合同源策略
如有有一个不相同
,就会出现跨域问题,不符合同源策略
导致的后果有
- 1、
LocalStorge、SessionStorge、Cookie
等浏览器内存无法跨域访问 - 2、
DOM节点
无法跨域操作 - 3、
Ajax请求
无法跨域请求
注意点:一个IP是可以注册多个不同域名的,也就是多个域名可能指向同一个IP,即使是这样,他们也不符合同源策略
跨域的时机?
跨域发生在什么时候呢?我考过很多位同学,得到了两种答案
- 1、请求一发出就被浏览器的跨域报错拦下来了(大多数人回答)
- 2、请求发出去到后端,后端返回数据,在浏览器接收后端数据时被浏览器的跨域报错拦下来
那到底是哪种呢?我们可以验证下,咱们先npm i nodemon -g
,然后创建一个index.js
,然后nodemon index
起一个node服务
// index.js http://127.0.0.1:8000
const http = require('http');
const port = 8000;
http.createServer(function (req, res) {
const { query } = urllib.parse(req.url, true);
console.log(query.name)
console.log('到后端喽')
res.end(JSON.stringify('林三心'));
}).listen(port, function () {
console.log('server is listening on port ' + port);
})
再创建一个index.html
,用来写前端的请求代码,咱们就写一个简单的AJAX请求
吧
// index.html http://127.0.0.1:5500/index.html
<script>
//步骤一:创建异步对象
var ajax = new XMLHttpRequest();
//步骤二:设置请求的url参数,参数一是请求的类型,参数二是请求的url,可以带参数
ajax.open('get', 'http://127.0.0.1:8000?name=前端过来的林三心');
//步骤三:发送请求
ajax.send();
//步骤四:注册事件 onreadystatechange 状态改变就会调用
ajax.onreadystatechange = function () {
if (ajax.readyState == 4 && ajax.status == 200) {
//步骤五 如果能够进到这个判断 说明 数据 完美的回来了,并且请求的页面是存在的
console.log(ajax.responseText);//输入相应的内容
}
}
</script>
最终,前端确实是跨域报错了。但这不是结果,我们要想知道是哪一个答案,关键在于看后端的node服务那里有没有输出,就一目了然了。所以,答案2才是对的。
同域情况 && 跨域情况?
前面提到了同源策略,满足协议号-域名-端口号
这三者都相同
就是同域
,反之就是跨域
,会导致跨域报错
,下面通过几个例子让大家巩固一下对同域和跨域
的认识把!
解决跨域的方案
跨域其实是一个很久的问题了,对应的解决方案也有很多,一起接着往下读吧!!!
JSONP
前面咱们说了,因为浏览器同源策略的存在,导致存在跨域问题,那有没有不受跨域问题所束缚的东西呢?其实是有的,以下这三个标签加载资源路径
是不受束缚的
- 1、script标签:
<script src="加载资源路径"&