簡單設置，解決使用webpack先後端跨域發送cookie的問題

最近用vue來作項目，用webpack來作前端自動化構建。webpack-dev-server會在本地搭建一個服務器，在和後端調試的時候，就會涉及到跨域的問題。

剛開始時，沒有用vue-cli來構建項目，而是參考了github上的vue-vueRouter-webpack來構建。看網上的資料，vue-cli能夠經過配置代理來解決跨域的問題：

proxyTable: {
  '/list': {
    target: 'http://api.xxxxxxxx.com',
    changeOrigin: true,
    pathRewrite: {
      '^/list': '/list'
    }
  }
}

具體能夠看這篇文章：Vue-cli proxyTable 解決開發環境的跨域問題

假如不用代理，那須要怎樣設置呢？

最簡單的方法是服務端將響就頭設置成Access-Control-Allow-Origin：域名，若是客戶端發送請求時，不須要攜帶cookie等信息，能夠設置成Access-Control-Allow-Origin：*，表示任何域均可以向服務端發送請求，客戶端不須要任何配置，就能夠進行跨域調試了。

可是通常的網站，都須要向後端發送cookie來進行身份驗證，此時，服務器還需向響應頭設置Access-Control-Allow-Credentials:true，表示跨域時，容許cookie添加到請求中。設置Access-Control-Allow-Credentials:true後，要將Access-Control-Allow-Origin指定到具體的域，不然cookie不會帶到客戶端，例如設置成Access-Control-Allow-Origin：http://192.168.0.1:8088,http://192.168.0.1:8088是前端服務器的域名，這就要求用webpack的時候，要指定具體的域來啓動，不要直接用localhost。

要向後端發送cookie，前端也須要有相應的配置。我在項目中，引用了fetch的polyfill,直接用fetch來發送ajax請求，須要將credentials設置成include，表示容許跨越傳遞cookie，不要將credentials設置成same-origin,若是設置成same-origin，只會在同源的時候發送cookie。另外還要將withCredentials設爲true。

jquery的設置以下：

xhrFields: {
    withCredentials: true
},
crossDomain: true,

爲了勉勵本身多些總結，開了個微信公衆號(front-end-article)，最近都在用vue作項目，近期應該會寫一些關於vue的文章。有興趣能夠關注一下哦，或者投稿也能夠，多多交流哈：