【筆記】vue-cli 開發環境中跨域連接后台api（vue-resource 跨域post 請求）

　　在vue-cli 項目中很多人會用到mock 數據（模擬數據），但是我覺得如果在真實的數據庫交互中開發會更有安全感一些，所以查了一下百度很多人推薦的就是：

　　跨域！

　跨域是什么概念？不同的主機名，同主機名不同端口號.....這些都是跨域，可以看看這篇文章http://www.qdfuns.com/notes/17659/bb090a096034a8074332a5060e9b6a3c.html

　  因為啟動vue-cli nodejs 會為我們創建一個服務器，一台電腦的端口號又不可以重復所以便唯有跨域才能獲取數據，這里我只介紹在開發環境中進行跨域而在生產環境不需要跨域的情況。這需要前后端的配合

　　 

　 首先，前端方面：

　　官方文檔介紹了 vue-cli 項目中 config 文件夾下有一個index.js，這個js 文件配置了一些關於打包后生成的文件配置以及開發環境中的文件配置，其中proxyTable 這個屬性項是我們要配置的

　　如圖：

　　

　　官方標准配置代碼為：

　　

'/api': {
        // 要請求的服務器地址
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        pathRewrite: {
         // 將目標的服務器地址 替換為如下的地址
         // 這里會將  http://jsonplaceholder.typicode.com 替換為
         // /api 所以發送后台請求的地址就變成 /api/xxx.php 之類的格式了   
          '^/api': ''
        }
  }

而我的的配置是這樣的：

'/yourdaily': {
        target: 'http://localhost/yourdaily/php',
        changeOrigin: true,
        pathRewrite: {
          '^/yourdaily/php': ''
        }
  }

鍵值顯得有些別有用心，因為我的后台文件結構是這樣的：

 

 項目文件夾下有一個php 的文件夾保存着api 模塊，當我將項目打包（圖中的static以及 index.html  文件就是打包后的文件）引入到服務器中我就再也無須修改我的后台接口地址了，因為在開發狀態中請求的地址我直接就可以寫成 ‘/yourdaily/php’，這個和打包后發送的后台地址是一模一樣的。有些取巧。

  ok，下面是后端方面的：

·php 文件要設置頭部

 

header('content-type:application:json;charset=utf8');  
header('Access-Control-Allow-Origin:*');  
header('Access-Control-Allow-Methods:POST');  
header('Access-Control-Allow-Headers:x-requested-with,content-type');

 

因為php 並沒有系統學習所以這些頭部也只是網上看一遍理解一下便粘貼下來了，如果不設置頭部請求會報錯，原因是php 的頭部沒有設置   Access-Control-Allow-Origin

而跨域中ajax 請求是禁止post 請求的 所以也要加上  Access-Control-Allow-Methods:POST 這一句

 

// -------------------  修改於2017-09-06 ------------------------------------

對於上面說的跨域ajax 請求是禁止post請求的說法今天終於搞清楚了，其實ajax 請求時get 和 post 請求都不能被接收原因是遵循了限制跨域讀的原則

而想跨域ajax 請求則只需在后台的腳本中加上  header('Access-Control-Allow-Origin:*') 這一句也是ok 的

參考文章地址： http://www.cnblogs.com/davidwang456/p/3977627.html

 

而今天在自己的項目里面遇到了一個新問題，vue-resource 跨域post請求傳遞不了參數的問題。

vue-resource 的參數值設置是這樣的：

this.$http.post('/yourdaily/php/register/check.php', {
     arg1: someArg,
     arg2: anotherArg

  }).then(res => {
       // do something....
  });

但是這樣的提交 參數只會當成一個json 數據去提交給后台，查看xhr 的信息時顯示這樣：

 

 於是在這篇博客中找到了答案：

http://blog.csdn.net/guxiansheng1991/article/details/66969121

 而官方文檔也給出了答案，只怪自己沒有留意

 

通過設置這個參數便可以將post 請求的參數按照表單的方式傳遞給后台了

這個選項的方式如下

this.$http.post('/yourdaily/php/register/check.php', {
      arg1: someArg,
      arg2: anoterArg
  }, {emulateJSON: true}).then(res => {
       // do something
  });

 

這樣便解決了~