什么是跨域

浏览器的同源策略会导致跨域,这里同源策略又分为两种:

  1. DOM 同源策略:禁止对不同源页面 DOM 进行操作。这里主要场景是iframe跨域的情况 ,不同域名的iframe是限制互相访问的。
  2. XmlHttpRequest同源策略:禁止使用XHR对象向不同源的服务器地址发起HTTP请 求。

(第二种则是我们常见的协议、域名、端口 同源策略

为什么要有跨域 同源策略是为了安全 ,CSRF攻击正是利用了这一点。

dev 模式

在开发环境下,我们可以通过关闭谷歌浏览器的同源策略或者用 vue-cli 自带的 proxyTable 来跨域。

JSONP

我们经常会说,用jsonp可以跨域请求,本质上是利用了script标签的src属性,Web 页面上调用 js 文件不受浏览器同源策略的影响,所以通过 Script 便签可以进行跨域的请 求。

<script type="text/javascript">
 function handleResponse(response){
   console.log(response);
 }
 var oBtn = document.getElementById('btn');
 oBtn.onclick = function() {
  var script = document.createElement("script");
  script.src = "https://api.douban.com/v2/book/search?q=javascript&count=1&callback=handleResponse";
  document.body.insertBefore(script, document.body.firstChild);

};
</script>

从上面代码我们可以看出为什么 jsonp 只支持get方式的请求了。

CORS

CORS 全称是跨域资源共享(Cross-Origin Resource Sharing),是一种 ajax 跨域请求资 源的方式,支持现代浏览器,IE 支持 10 以上。原理是利用服务器没有跨域一说,通过在 服务器设置权限从而让浏览器可以访问。大致过程是:

  • 在客户端设置 xhr 属性withCredentialstrue (带 cookie)
  • 在服务端需要在 response header中设置字段: Access-Control-Allow-Origin: 这里是请求的域名 Access-Control-Allow-Credentials:true 当我们在 A 域名下 访问 B 域名的接口时,此时cookie需要手动携带,
  • 在 axios 中:
import axios from 'axios'
axios.defaults.withCredentials = true
Vue.prototype.$axios = axios
  • 在 jq 中:
 xhrFields: {withCredentials: true},

同样后端的Access-Control-Allow-Origin在这种情况下就不能是*了。 因为 ‘*’ 会 和 Access-Control-Allow-Credentials:true 冲突,需配置指定的地址。可以通过获取请 求头的 Origin 来自动配置,即谁请求允许谁。相当于通配符换了一种写法。

postMessage

这是 H5 的一个新api,类似于 vue 父子组件的传值,都是通过一个事件函数发送数据, 然后在目标页面监听这个事件。