2016 Ajax 二三事

Sumary

今天我要说的其实和之前的ajax不太一样。包括以下内容：

如果你认为你都知道就不用看了。

CROS

最近在写一个项目，完全的前后端分离，所有数据都是来自于Ajax，连权限控制也是前端完成了。

既然需要如此之多的数据，我也就起了一个远端的开发服务器。

没有用自己的电脑mock数据的原因有很多。第一是性能，我的电脑当初买的时候买到了低电压版本的，所以，性能上过不去，所以开个虚拟机压力还是有的。然后是杂乱，我不希望自己的电脑上变得杂乱，安装各种MySQL, MongoDB, Redis什么的。所以也就没在本机搞。最后是兼容性，有很多软件对Windows平台支持不够给力，所以只得开个远端服务器了。

至于jsonp，因为到时候前端是放在生产服务器上的，那个时候又没有跨域问题，懒得改了。

背景介绍完了，就剩跨域了。

一开始是各种google希望找到怎么在Nginx配置可以跨域，后来发现github API貌似是个好例子

ajax

看看，是不是能学到很多。

Access-Control-*那三行就是允许跨域的header，最后一句是HSTS的header。

所以，Nginx配置变成了这样：

server {
      listen 80;
      server_name dev.domain.com;
      root /path/to/public;
      index index.php index.html index.htm;
      add_header "Access-Control-Allow-Origin" "*";
      add_header 'Access-Control-Allow-Credentials' 'true';
      add_header "Access-Control-Allow-Headers" "X-Requested-With, Content-Type";
      add_header "Access-Control-Allow-Methods" "GET,POST,PUT,DELETE,OPTIONS";
      location / {
            try_files $uri $uri/ /index.php?$query_string;
      }
      location ~ \.php$ {
          fastcgi_pass   127.0.0.1:9000;
          fastcgi_index  index.php;
          fastcgi_param  SCRIPT_FILENAME  $document_root$fastcgi_script_name;
          include        fastcgi_params;
      }
    }

add_header那四行使得跨域成功了。

我不说其他跨域方案的原因在于网上满地都是，自行google吧。

POST

上面的代码是最终版的，其实一开始并没有这么完整。

一开始没有"Access-Control-Allow-Headers" "X-Requested-With, Content-Type"中Content-Type这一段的，这就导致了一个问题。

你用ajax框架发不了post请求。

因为根据跨域的原则来说，浏览器会先发OPTIONS, 确认之后才会发POST。

我在碰到问题的时候一度以为是vue-resource的代码问题。不过我也确实觉得vue-resource的测试写的也太少了。

如果你在dev tools里找xhr请求，你会惊异的发现，同一个请求发了两遍。一个是OPTIONS，第二个是POST。

MDN: HTTP access control

Fetch

Fetch是新的API，用来发送请求的。当新版xhr用就好了，不过有着比xhr更方便的接口什么的

fetch('/path/to/resouce')
    .then( res => res.json())
    .then( data => console.log(data))
    .catch( err => console.log(err))

至于怎么用xhr实现网上有太多的教程了。

问题来了，post怎么发？

let fd = new FormData();
fd.append('foo', document.querySelector('#foo').value)
fd.append('file', document.querySelector('#fileElement').files[0])

fetch('/path/to/post', {
    method: 'post',
    body: fd
}).then( res => res.json())
.then( res => console.log(res))
.catch(err => console.log(err))

至于FormData下一段再说，反正fetch的body数据都得是FormData的，我测试过的。

对了，fetch兼容性支持很不给力，chrome到42才支持，其他的就别指望太多了。

fetch polyfill

FormData

FormData是个很棒的东西。尤其是解决了file upload这种鬼东西的上传什么的。

上面的例子里有file的上传，我想说的是，我强烈推荐用Form，实在是好用。

关于兼容性，到IE10了，可以了。我也压根不会管其他的浏览器，是吧～