用 vue 写前端， Java 做后端

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 2721 天前的主题，其中的信息可能已经有所发展或是发生改变。

用 vue 写前端，java 写后端
用 ajax 对接的时候怎么处理？ vue 的整个构建环境在 java 的环境中？
vue 单独出来访问不就是跨域了吗？
开发过程中单独出来，构建后构建的放到 java 目录中，那样开发过程中 ajax 也是跨域啊？谢谢大神们

27 条回复 • 2017-12-16 22:23:41 +08:00

cloverstd

2017-06-10 14:18:09 +08:00

CORS

http://www.ruanyifeng.com/blog/2016/04/cors.html

acrisliu

2017-06-10 14:45:35 +08:00 via Android

spring boot 提供 restful API，vue 做页面数据渲染，前后分离。

wwqgtxx

2017-06-10 14:57:38 +08:00 via iPhone

前面放一个 nginx 分别反代一下不就可以避免跨域了么，vue 直接挂在 /上，java 挂在 /api 上

isb

2017-06-10 16:25:56 +08:00 via iPhone

vue-cli 支持开发的时候直接代理过去。

sulang

2017-06-10 17:06:42 +08:00

我是用 vue+Django

wly19960911

2017-06-10 18:45:07 +08:00

1. cors
2. 反代
3. 关闭 chrome 的安全性设置开发，关键词，--disable-web-security

我建议是第三个，因为另外两个都需要设置后台。

changwei

2017-06-10 19:26:27 +08:00 via Android

既然是前后端分离，那么带服务器也可以分离啊，前端已经是纯静态资源了，直接用 nginx 输出吧。

TangMonk

2017-06-10 19:36:51 +08:00

设置下 api 返回的 CORS 的 header 就行了，简单直接

Access-Control-Allow-Origin: *

详情请阅读： https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

u5f20u98de

2017-06-10 19:40:39 +08:00

开发的时候跨域也没啥，就是在 nginx 上加几个 http 头而已。
我是 Vue+Go，也是分别开发的。
头直接加在代码里，真正发布的时候 node 编译好起个 http fileserver 然后把跨域代码去掉。

Sapp

2017-06-10 22:31:27 +08:00

开发的时候直接架个 node 服务器，或者 vue-cli 自带的 proxy，直接就可以跨域，根本不需要设置，然后 build 直接生成静态文件。

x7395759

2017-06-10 23:06:18 +08:00

nginx 就好

ft234451532

2017-06-10 23:35:42 +08:00

proxy

ke1e

2017-06-11 00:10:28 +08:00 via Android

不喜欢浏览器渲染，所以我的方式是使用 freemarker 加 vue 的形式

marsLeo

2017-06-11 05:55:58 +08:00

@wly19960911 #6 不同意第三个方法，虽然可以用来调试，但不是开发方案；既然做前端页面开发，跨域问题处理就应该用前端方法，而不是修改客户端，这样做也不安全

majiawei

2017-06-11 09:32:51 +08:00

webpack-dev-server 的 proxy 是一种解决方法

wly19960911

2017-06-11 09:37:29 +08:00 via Android

@marsLeo 哦，可能没有说清楚，我说开发过程中使用这个。对于没有表达好说个抱歉

RangerWolf

2017-06-11 10:10:49 +08:00

非常推荐 docker。

在 dockek build 的时候把 vue 的东西 build 放到一个固定的目录，然后整个打包成 war 包即可

我们的后端是 python，前端就是 vue 渲染的。这种做法做起来也非常爽。没有跨域的问题。

66kanfengjing

2017-06-11 10:47:46 +08:00 via iPhone

nginx 反向代理，配置很快。记得一句话就可以了

workwonder

2017-06-11 18:23:18 +08:00 via Android

都是一家，配置好 cors 不就行了，早晚要配置的

fumichael

2017-06-11 22:29:29 +08:00

开发时用 nginx 转发
或者 vue-cli 里面配好了 http-proxy-middleware
示例参考： https://github.com/hql123/vue-ruby-china/ 如下图

开发完成打包放到 Java 项目里面，这样前后端都不需要修改。
仅供参考，如有错误或建议，请指出，谢谢

RainFinder

2017-06-12 11:00:29 +08:00

@fumichael 重点是哪里？要怎么配置？

RainFinder

2017-06-12 11:00:48 +08:00

@wwqgtxx 具体怎么实现

fumichael

2017-06-12 11:06:19 +08:00

@RainFinder 左边不是有个目录结构么，还有地址栏，2 个地方可以看到是哪个文件了呀。

ppwangs

2017-06-12 14:45:45 +08:00

要想兼容性好就 jsonp。

notreami

2017-07-29 20:40:26 +08:00

@RangerWolf Vue 路由怎么处理的？

RangerWolf

2017-07-29 21:33:44 +08:00

@notreami sorry 前端并不是我做的 vue 这里把前端页面写好我 npm build 之后就可以对接起来了。

jack80342

2017-12-16 22:23:41 +08:00

最近翻译了 Spring Boot 最新的官方文档，https://www.gitbook.com/book/jack80342/spring-boot/details