前后端分离跨域问题小记

This topic created in 3674 days ago, the information mentioned may be changed or developed.

看人家都说搞啥前后端分离，自己也想用 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 ，然后总算登陆成功了。

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

折腾

分离

域

生命不息

7 replies • 2016-05-17 09:22:39 +08:00

bwangel

May 16, 2016

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

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

是这个地址！

qinxi

May 16, 2016 via Android

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

mlyknown

May 16, 2016

学习了， sf 的文章不错

catoncat

May 17, 2016 via iPhone

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

bwangel

May 17, 2016 via Android

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

catoncat

May 17, 2016

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

catoncat

May 17, 2016

@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)