關於Vue2.0，Express實現的簡單跨域

npm install express -g

通過npm全局安裝express，之后可以通過

express --version

來查看express版本

express server

通過express server生成server項目文件

npm install

安裝server的項目依賴

可以通過執行server下的bin\www文件可以開啟服務

在www文件我們可以默認監聽的端口為3000

var port = normalizePort(process.env.PORT || '3000');

通過訪問http://localhost:3000就可以看到Express的歡迎頁。

在index文件，定義一個映射，請求這個地址（ http://localhost:3000/test），返回一個簡單的JSON

服務端暫時先結束。

通過vue-cli創建一個簡單的項目，步驟見vue官方文檔，再安裝axios或者vue-resource進行ajax請求。

在main.js下，可以在mounted方法里實現一個get請求

 

mounted方法會在vue掛載完成后執行一次，詳見vue的生命周期。

此時執行

npm run dev

通過8080端口可以訪問vue頁面，在控制台可以看到如下錯誤

頁面並不能直接請求到不同端口的資源，這里需要實現一個跨域。

回到服務端

解決這個問題，我們可以借助cors包實現

npm install cors --save  

在app.js中，對cors進行配置，允許訪問的域，請求，請求頭

app.use(cors({
    origin:['http://localhost:8080'],
    methods:['GET','POST'],
    alloweHeaders:['Content-Type', 'Authorization']
}));

重啟服務后，可以看到數據被前端成功獲取

 不通過cors包，還可通過app.all進行配置

app.all('*',function (req, res, next) {
  res.header('Access-Control-Allow-Origin', 'http://localhost:8080');
  res.header('Access-Control-Allow-Headers', 'Content-Type');
  res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');
　next();　
});