迅速理解前端跨域问题

啥是跨域

• 网站的协议名 protocol
• 域名 host
• 端口号 port
  以上三者中只要有一个不同，就属于跨域请求
  如果都相同，则称“同源”

跨域请求的限制

由于浏览器同源策略

• cookie、LocalStorage 和 IndexDB 无法读取；
• DOM 无法获得
• AJAX请求不能发送

跨域怎么解决

JSONP（JSON with Padding）方法：

HTML 的 script 标签是不受同源策略的限制的，可以通过 script 标签加载并执行其他的域的 js 文件的。把js、css，img等静态资源分离到另一台独立域名的服务器上，在html页面中再通过相应的标签从不同域名下加载静态资源，从而被浏览器允许。
缺点：只支持GET请求。
优点：兼容性好，啥古老浏览器都兼容
代码：https://www.runoob.com/json/json-jsonp.html

CORS 方法：

使用自定义的 HTTP 头部，让服务器能声明哪些来源可以通过浏览器访问该服务器上的资源，从而决定请求或响应是应该成功还是失败
缺点：不是绝对安全
优点：先进，支持所有类型的HTTP请求，错误处理

还有window.name、document.domain 、postMessage、nginx代理跨域、nodejs中间件代理跨域等

推荐：https://www.jianshu.com/p/ad799a7801e1