低版本IE下跨域的方案

这篇文章也发在我的博客，欢迎围观?

采用的跨域方案

采用CORS方式进行跨域。

CORS方式跨域的问题

IE10下，不支持JS跨域加载图片绘制到canvas。

IE9下：

1. XMLHttpRequest不支持CORS。
2. 不支持new FormData()。
3. 不支持XMLHttpRequest.send(formData)，将formData作为参数发送。

可以选择的解决方案

方案一：使用XDomainRequest代替XMLHttpRequest

IE9下，XDomainRequest(XDR)支持CORS，但有很多限制，具体如下：

1. XDR只支持GET和POST两种请求方式，不支持PUT/DELETE/HEAD请求。对于PUT和DELETE请求，需要特别处理。

   处理方案：
   
   前端：
   IE9下，将get和post以外的请求进行伪装，PUT和DELETE伪装成POST，HEAD请求伪装成GET，将真实请求方法用_method参数传递。
   
   后端：
   统一拦截前端的请求进行判断后执行对应的真实的请求方法。
   复制代码

2. XDR不支持自定义请求头。

   处理方案：
   
   前端：
   IE9下，同样将请求头作为参数传递。
   
   复制代码

3. content-type只允许设置为text/plain。

   处理方案：
   
   前端：
   IE9下，重新设置参数格式。
   
   后端：
   需要对接收的参数格式进行兼容。
   
   复制代码

4. XDR发起请求时，不携带authentication或cookies；cookies不会随请求发送，也不会随响应返回。

   处理方案：
   
   前端：
   针对用户token，由后端响应头设置改为前端获取后端响应后设置。
   
   复制代码

前端虽然所使用的axios库已经对XDR作出封装，但仍需要使用拦截器进行特殊处理。

// request.js

// ...other codes

axios.interceptors.request.use(function (config) {
  if (isIE9) {
    if (config.method === 'put' || config.method === 'delete') {
      config.params._method = config.method
      config.method = 'post'
    }
  }
  return config;

}, function (error) {
  //错误处理

  return Promise.reject(error);
});


axios.interceptors.response.use(function (response) {
  if (isIE9) {
      let token = response.data.token
      if(token){
        setCookie('token', token)
      }
  }
  return response;

}, function (error) {

  return Promise.reject(error);
});
复制代码

方案二：IE9下使用代理

针对IE9的使用环境，使用服务器进行反向代理。

处理方案：
    
前端：
区分浏览器环境切换请求的接口，IE9统一走代理接口。

复制代码

最后的最后

1. 伪装请求和将自定义头部信息转换为参数传递对安全性会有一定影响，所以为了安全性考虑，建议还是选择使用反向代理的方式。
2. 希望大家不要遇到兼容IE9的需求...?

其实这是个已经很久远的问题了，参考了前人的方案以及结合自身的业务，暂时考虑上述两种方案。如果各位还有更好的方案，请不吝告知，谢谢！

Reference

1. IE9下的跨域问题小总结
2. 跨域请求 (XDR) 简介
3. XDomainRequest – Restrictions, Limitations and Workarounds
4. IE9 跨域请求兼容(https://github.com/CntChen/cntchen.github.io/issues/14)
5. 请求伪装
6. IE10 and Cross-origin resource sharing (CORS) issues with Image / Canvas