前后端分离跨域问题小记

2016-05-16 11:05:53 +08:00
 bwangel

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

看人家主机名都是www.example.comapi.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 ,然后总算登陆成功了。

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

9222 次点击
所在节点    分享发现
7 条回复
bwangel
2016-05-16 11:07:45 +08:00
手误了一下, Vue-Resource 的 Issue 地址写错了。

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

是这个地址!
qinxi
2016-05-16 20:46:12 +08:00
nginx 反向代理,前后台无入侵的首选方式。
mlyknown
2016-05-16 20:53:14 +08:00
学习了, sf 的文章不错
crs0910
2016-05-17 01:05:38 +08:00
vue-cli 可以配置跨域
前端自己起个 node 也可以跨域
不用折腾后端
bwangel
2016-05-17 07:32:06 +08:00
@crs0910 ,真的,咋配置啊?能给个提示吗?
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
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)

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/278893

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX