前端源码中需写死后端服务的地址吗

V2EX = way to explore

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

现在注册

已注册用户请登录

› Vue.js

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

本人非前端开发，遇到一个问题。

某台应用除了内网网段使用外，外部用户也会通过一个反向代理来访问。

vue 的项目中，源码需要写死后端接口服务的 ip 和端口吗，当前是写死在源码中，导致这个应用发布后。只有内部可以用。

vue 中的项目中，是否可以使用相对路径的使用，访问后台，然后后台通过 nginx 的配置来实现转发到不同的服务。

如：

    location /api {
	client_max_body_size 1000m;
        proxy_pass http://127.0.0.1:59000;
        proxy_read_timeout 1200;

    }

前端同事不太了解这块，所以我来问下。

有没有什么现成的方法可以用。

26 条回复 • 2022-06-30 13:02:53 +08:00

rming

2022-06-29 13:25:30 +08:00

proxy_pass 一般开发过程中用，发布后用服务器 proxy 防止跨域问题

thinkershare

2022-06-29 13:33:47 +08:00

取决于你的前端是否和后端部在再同一个 IP 的同一个 Port 上.
也就是$protocal://host:port 这个部分只要前后端是一致的, 那么可以使用相对地址. 不过一些复杂的网站的 service 的 url 特别多, 肯定是需要写死在前端, 或追至少要写死一个 1 个获取其它地址的统一入口地址.
例如: Nginx 代理: 192.168.0.1:5001(API+vue public resources), 局域网直接使用局域网地址, 然后 Nginx 使用 https://host 访问, 所有 API 都是以相对地址请求: post: /api/app/token 这种, 没啥问题

thinkershare

2022-06-29 13:36:09 +08:00

前后端不跨域的情况, 都直接使用相对地址发起 ajax 或追 fetch 请求就好了嘛

luob

2022-06-29 13:37:53 +08:00

这段配置就是最方便的做法，没有问题

mink

2022-06-29 13:38:32 +08:00

可以通过配置文件来修改服务器地址和接口地址，类似于下面这种

//.env.development
ENV = 'development'
VUE_APP_BASE_API = '/api/'

//.env.production
ENV = 'production'
VUE_APP_BASE_API = ''

// request.js
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API, // api 的_url
timeout: 50000, // request timeout
});

这样你就可以使用 process.env 读取配置文件中设置的 api_url ，切换配置文件可以使用 mode 的方式。不管是使用 vue cli 还是 vite 都是提供这种切换方式的。

https://cli.vuejs.org/zh/guide/mode-and-env.html#%E6%A8%A1%E5%BC%8F

nowtg

2022-06-29 13:38:42 +08:00 via iPhone

前端打包后是 html + js 放在 nginx ，直接 /api/xxx 请求就行了。nginx 上配置代理

xlzyxxn

2022-06-29 13:42:02 +08:00

导致这个应用发布后，，发布你们直接 npm run 起来的吗，打包发布+ng 啊

dcsuibian

2022-06-29 13:58:05 +08:00

“某台应用除了内网网段使用外，外部用户也会通过一个反向代理来访问。”
看起来，这台 nginx 应该在内网中，但暴露给了外网。那你直接写外网的地址就好了，虽然内网的流量走了一次转发，但到底是内网，速度没啥影响。

另外，我的 vue 项目就是使用相对路径的，平时代码中写死的路径是 /api/articles/xx 这种。ip 和端口不包括在里面。平时直接使用 vue.config.js 中的 devServer 访问后端服务。
你们前端是怎么开发的？直接写完整路径，然后后端去掉同源限制吗？还是发给 nginx ，由 nginx 再发给前端 devServer 和后端服务器？

jydeng

2022-06-29 14:01:57 +08:00

前端打包完直接发到 nginx ，你在 nginx 配置就行了。

kongkx

2022-06-29 14:07:08 +08:00 via iPhone

开发时 devserver api 服务的 proxy ；生产时 nginx 做 api proxy 。反正不搞跨域

daliusu

2022-06-29 14:08:37 +08:00

可以动态配置，比如在实际打包的时候根据命令输入进去，打包到 index.html 的 meta 标签里，然后你的 js 直接读 meta 里定义的各种变量（也包括请求地址），这样的好处是，你不管在哪个平台，只需要一个能修改 index.html 的脚本同时只打包一次，就可以随意的修改各种参数信息。如果用 process.env 也是需要预先定义好的几个，如果环境少其实没有问题，但是如果你们那里环境非常多，比如同一个代码你可能要部署 abcdefg... n 个版本，并且每个版本的变量可能随时都不一样，用 process.env 局限就有点大了，nginx 就更别说了