这是一个创建于 2917 天前的主题，其中的信息可能已经有所发展或是发生改变。
看人家都说搞啥前后端分离，自己也想用 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 ，然后总算登陆成功了。
折腾一个跨域折腾了两天，感觉搞个前后端分离的项目真不简单，不过感觉学到了不少东西，赚了。嘿嘿，生命不息，折腾不止。
 |
1
bwangel OP |
 |
2
qinxi 2016-05-16 20:46:12 +08:00 via Android
nginx 反向代理，前后台无入侵的首选方式。
|
 |
3
mlyknown 2016-05-16 20:53:14 +08:00
学习了， sf 的文章不错
|
 |
4
crs0910 2016-05-17 01:05:38 +08:00 via iPhone
vue-cli 可以配置跨域
前端自己起个 node 也可以跨域 不用折腾后端 |
|
6
crs0910 2016-05-17 09:17:38 +08:00
@bwangel vue-cli 的 webpack 会起一个 express 服务，服务端请求服务端是不存在跨域问题的。直接用新版本的 vue-cli 的话，他的 /build/dev-server.js 里面用了 http-proxy-middleware 中间件, 你只需要在 /config/index.js 里面配置 dev 的 proxyTable
 |
|
7
crs0910 2016-05-17 09:22:39 +08:00
@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)
|
Select Language