- 在讲解决跨域解决方案之前,我们需要了解什么是跨域,在什么情况下会跨域,跨域解决的是什么问题?
一、跨域,是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对JavaScript实施的安全限制。
同源策略限制了一下行为:
Cookie、LocalStorage 和 IndexDB 无法读取
DOM 和 JS 对象无法获取
Ajax请求发送不出去
二、跨域场景
所谓的同源是指,域名、协议、端口均为相同。
http://www.baianinfo.com/index.html 调用 http://www.baianinfo.com/server.php 非跨域
http://www.baianinfo.com/index.html 调用 http://www.baianinfo.cn/server.php 跨域,主域不同
http://abc.baianinfo.com/index.html 调用 http://def.baianinfo.com/server.php 跨域,子域名不同
http://www.baianinfo.com:8080/index.html 调用 http://www.baianinfo.com/server.php 跨域,端口不同
https://www.baianinfo.com/index.html 调用 http://www.baianinfo.com/server.php 跨域,协议不同
localhost 调用 127.0.0.1 跨域
2.跨域的解决方案。
- jsonp跨域 (一般只处理get请求)
- document.domain + iframe 跨域 (要求主域名相同)
- window.name + iframe 跨域
- location.hash + iframe 跨域
- postMessage跨域
- 跨域资源共享 CORS (主流的跨域解决方案)
- node 代理跨域
- 后端代理跨域
- nginx 代理跨域
server {
listen 80;
server_name www.baidu.com;
location /api {
proxy_pass https://baidu.cn || http://0.0.0.0:8080 || https://1.2.3.4:8080;
index index.html index.htm index.jsp;
}
}