前端的跨域及其解决方案

什么是跨域？向非同源地址发送Ajax 请求就是跨域？

什么是非同源？协议（protocol），主机（host）和端口号（port）三者之一不同

什么是浏览器的同源策略？

• 浏览器上为安全性考虑实施的非常重要的安全策略
• 浏览器会限制脚本中发起的跨域请求。比如，使用 XMLHttpRequest 对象和Fetch发起 HTTP 请求就必须遵守同源策略
• <script>、<img>、<iframe>、<link>等标签都可以加载跨域资源，而不受同源限制

跨域的常见方案

• JSONP 是服务器与客户端跨源通信的常用方法。最大特点就是简单适用，兼容性好（兼容低版本IE），缺点是只支持get请求，不支持post请求，常用
• CORS 是跨域资源分享（Cross-Origin Resource Sharing）的缩写。它是 W3C 标准，属于跨源 AJAX 请求的根本解决方法，常用
• 使用代理服务器，比如axios可以配置代理解决跨域，常用
• 设置document.domain解决无法读取非同源网页的 Cookie问题，没用过
• 跨文档通信 API：window.postMessage()，没用过

细节

• jsonp只支持get，不支持post
• JSONP的原理其实就是利用引入script不限制源的特点
• 针对cors，如果是带cookie的跨域请求，前后端都需要进行设置，不是用了cors，前端就什么都不用关心，还记得withCredentials请求头么？