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

[among]

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

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

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

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

如：

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

    }

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

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

[rming]

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

[thinkershare]

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

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

[luob]

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

[mink]

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

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

[liuw666]

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

[xlzyxxn]

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

[dcsuibian]

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


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

[jydeng]

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

[kongkx]

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

[daliusu]

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

[IvanLi127]

不需要写死，转发的话，服务器顶得住就转发咯。不过不介意多请求一次的话，前端的 HTTP 服务器上存个后端的服务地址列表文件，前端直接用相对路径请求这个文件获取实际的后端地址，然后拿着地址去调接口也成呀。

[among]

现在的问题是，nginx 的配置是清楚的。
但是前端同事不知道怎么搞，发布出来的应用，抓包看到的，还是直接连接后端的 ip 和端口。。

[wu67]

建议多看看文档, 估计是没区分两个环境直接就套了一个配置

[theohateonion]

@among 放到 nginx 上直接请求本域就可以了，要是不会弄让他自己查

[coolcoffee]

前端我是建议不要走 nginx 反向代理接口，这样可以纯静态化丢到 cdn 里面去减少运维成本和服务宕机风险。所有的跨域请求都可以后端配置好 CORS 响应头。

如果真的要配置 nginx 反向代理，那么也应该配置好一个域名，根据不同的域名去转发到不同的后端接口地址。

[molvqingtai]

同 5 楼，api 写 .env 文件中

[darkengine]

前端为啥要写死 IP ，用域名啊

[Gaays]

前端可以打包请求 localhost/api/xxx ，后端 nginx 转发就好了

[snowlyg]

既然有反向代理的外网了，为什么还要考虑内网访问？统一走外网不就好了，写不写死都不是问题了。

[huangqihong]

@among 没有在 vue.config.js 中配置代理吗，还是用 axios 写死了 baseUrl ？

[darknoll]

就直接 /api/*****

[2NUT]

写死域名

域名后反代理真实服务器

[lujiaosama]

根据 node 环境(dev/test/prod)请求不同的域名 ,域名反向代理服务器. 服务器上 ng 配置怎么修改都不影响前端请求的.

[among]

在我的不断要求下，终于改好了。

看了下 git 记录，好像是这行，不确定对不对。

```
#VUE_APP_BASE_API = 'http://10.114.21.175:8765'
VUE_APP_BASE_API = ''
```

感谢各位。。

[zhuweiyou]

代码里一般是 /xxx/yyy 请求, webpack 或者 vite 里配一下 proxy 就好. 代码不用改, 不需要你那样配置 ENV