前Vue，后Express的'Access-Control-Allow-Origin'问题

起因

都知道如果使用 vue-cli 快速构建Vue（版本：2.0）开发环境的话都会有一个webpack-server 为你打开一个 localhost 端口展示结果。

但是毕竟构建一个单页面应用肯定需要再写一个后端服务器，那么首选就是用Express（版本：4.0），而这个服务器会开启另一个 localhost 端口（比如webpack-server使用的是localhost:8080，而Express使用的是localhost:3000） 。

那么他们之间数据交互就会产生问题了：

我其实一上来就蒙圈了，在网上找了好长时间的资料，好多解决方案（当然对我都无效）都是在webpack-server，vue-source上下功夫，后来看到几篇文章，才感觉明白了什么… ，问题其实出现在Express服务器那里

---

解决方案

先展示解决方案，在Express服务器文件里加这么一段：

// var app = require('express')();app.all("*", function (req, res, next) {  res.header('Access-Control-Allow-Origin', '*');  res.header("Access-Control-Allow-Headers", "Content-Type,Content-Length, Authorization, Accept,X-Requested-With");  res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");  next();});

这仅是在开发的时候使用的

---

分析

先来比较一下修改代码之前与之后Chrome上Network显示显示的信息

• 修改之前

  

• 修改之后

  • 有两个请求（最底下的两个）
    

  • 第一个内容
    

  • 第二个内容

    

看看有什么不同？

在第二大栏 Response Headers 里多了三行内容，这正是那一段代码加的内容，在来看控制台那一段报错

Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource

就是说返回的Header中没用设置 Access-Control-Allow-Origin 这个信息，那么添上去不就行了嘛

而且修改之前http的请求为 options ，修改后虽然第一次请求类型也为 options ，但是第二个就为 post 了

那 options 是个啥，来自MDN

HTTP 的 OPTIONS 方法 用于获取目的资源所支持的通信选项。客户端可以对特定的 URL 使用 OPTIONS 方法，也可以对整站（通过将 URL 设置为“*”）使用该方法。

那为何会有两次请求呢，借用别人的解释吧

简单来说，就是“非简单请求”在跨域时，浏览器会默认自动帮你发一个OPTIONS请求，到服务器端请求服务器确认该请求的合法性，服务器端必须得有相应的路由处理该请求，并认真返回200响应，然后浏览器才会再次发出正常的、你需要的请求。

---

附带阅读

其实这个问题本质上是CORS问题，在 Segmentfault, MDN 以及 html5rocks 上都有阐述相关问题的文章，看起来不错的样子（其实我还没看，前面找解决方案都找蒙了），放一个传送门吧

• 构建public APIs与CORS

• HTTP access control (CORS)

• Using CORS