前后端分离跨域问题小记

[bwangel]

看人家都说搞啥前后端分离，自己也想用 Vue.js 和 Django 折腾一个，结果发现好难啊，一个跨域就折腾了好久！

看人家主机名都是www.example.com和api.example.com,我也想这么来吧，结果就引发了跨域血案！

首先跨域请求发送不出去，先参考了阮一峰老师的文章，然后去找了一个开源 Django App django-cors-headers去设置好跨域需要的 header 。

然后又发现为啥前端发来的 JSON 数据，后端接收不到，结果在StackOverflow上查到是Content-typeDjango 不兼容。又按照 Vue-Resource 的文档设置了Content-type的类型。

最后发现用户登陆咋登陆不了呢？ Chrome 调试查看 Http 请求包发现 Cookie 没有发送。又找到一篇文章，了解了一下 xhr 和 CORS 。然后去 Vue-Resource 的 Github 上搜到一个[Issue](( https://github.com/vuejs/vue-resource/issues/195))，设置了 xhr 的 withCredentials ，然后总算登陆成功了。

折腾一个跨域折腾了两天，感觉搞个前后端分离的项目真不简单，不过感觉学到了不少东西，赚了。嘿嘿，生命不息，折腾不止。

[bwangel]

手误了一下， Vue-Resource 的 Issue 地址写错了。

https://github.com/vuejs/vue-resource/issues/195

是这个地址！

[qinxi]

nginx 反向代理，前后台无入侵的首选方式。

[mlyknown]

学习了， sf 的文章不错

[crs0910]

vue-cli 可以配置跨域
前端自己起个 node 也可以跨域
不用折腾后端

[bwangel]

@crs0910 ，真的，咋配置啊？能给个提示吗？

[crs0910]

@bwangel vue-cli 的 webpack 会起一个 express 服务，服务端请求服务端是不存在跨域问题的。直接用新版本的 vue-cli 的话，他的 /build/dev-server.js 里面用了 http-proxy-middleware 中间件, 你只需要在 /config/index.js 里面配置 dev 的 proxyTable

[crs0910]

@bwangel 如果你没用 `vue-cli` ，而是自己配置的 `webpack`，可以参考 [http-proxy-middleware]( https://github.com/chimurai/http-proxy-middleware "http-proxy-middleware") 和 [webpack-dev-middleware]( https://webpack.github.io/docs/webpack-dev-middleware.html)