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

› Vue.js

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

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

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

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

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

如：

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

    }

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

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

26 replies • 2022-06-30 13:02:53 +08:00

rming

Jun 29, 2022

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

thinkershare

Jun 29, 2022

取决于你的前端是否和后端部在再同一个 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

Jun 29, 2022

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

luob

Jun 29, 2022

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

mink

Jun 29, 2022

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

//.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

Jun 29, 2022 via iPhone

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

xlzyxxn

Jun 29, 2022

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

dcsuibian

Jun 29, 2022

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

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

jydeng

Jun 29, 2022

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

kongkx

Jun 29, 2022 via iPhone

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

daliusu

Jun 29, 2022

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