# 跨域
# 什么是跨域?
简单来说跨域是指,一个网站下的网页向另外一个网站请求资源(包括图片、文字等等),这就形成了跨域。比如说:link、script、img都可以引入其他网站的文件。
跨域主要分为5大类型:
- 域名不同:http://www.a.com 和 http://www.b.com
- 子级域名不同:http://ab.bai.com 和 http://ba.bai.com
- 端口不同:http://localhost:3000 和 http://localhost:5000
- 协议不同: http://12306.cn 和 https://12306.cn
- 同一台电脑,自己的域名和IP互访: http://localhost:3000 和 http://127.0.0.1:3000
# 什么是同源?
同源策略:同源策略是浏览器定义的,他主要是解决浏览器的安全问题存在的,它禁止ajax使用其他服务器来源的数据,只有响应头中的来源地址和当前网页的地址相同,才允许使用该数据。 所以我们如果要跨域获取数据,就会被浏览器拦截!
# 为什么要跨域?
那么问题来了,我们为什么要跨域请求呢:实际上我们在真实项目中,前后端项目是分离开的,不是一个人在自己电脑上开发的。在开发联调时,我们要想从前端向后端请求数据,就必然会涉及到跨域请求。
# 怎么解决跨域?
那么如何解决这个问题呢:
- CORS跨域
- JSONP跨域
- Proxy前端代理
简单讲一下使用CORS中间件:
原理就是在服务器端给客户端响应数据前,将接口的响应头地址改为客户端对应的地址(伪装),例如:
res.writeHead(200,{
"Access-Control-Allow-Origin":"客户端地址:端口号",
"Content-Type":"application/json;charset=utf-8"
});
res.write(JSON.parse(result));
res.end()