前端源码中需写死后端服务的地址吗 - V2EX
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
among
0.01D
V2EX    Vue.js

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

  •  
  •   among 2022-06-29 13:23:20 +08:00 6655 次点击
    这是一个创建于 1279 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

    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
        1
    rming  
       2022-06-29 13:25:30 +08:00
    proxy_pass 一般开发过程中用,发布后用服务器 proxy 防止跨域问题
    thinkershare
        2
    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
        3
    thinkershare  
       2022-06-29 13:36:09 +08:00
    前后端不跨域的情况, 都直接使用相对地址发起 ajax 或追 fetch 请求就好了嘛
    luob
        4
    luob  
       2022-06-29 13:37:53 +08:00
    这段配置就是最方便的做法,没有问题
    mink
        5
    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
        6
    nowtg  
       2022-06-29 13:38:42 +08:00 via iPhone
    前端打包后是 html + js 放在 nginx ,直接 /api/xxx 请求就行了。nginx 上配置代理
    xlzyxxn
        7
    xlzyxxn  
       2022-06-29 13:42:02 +08:00
    导致这个应用发布后,,发布你们直接 npm run 起来的吗,打包发布+ng 啊
    dcsuibian
        8
    dcsuibian  
       2022-06-29 13:58:05 +08:00
    “某台应用除了内网网段使用外, 外部用户也会通过一个反向代理来访问。”
    看起来,这台 nginx 应该在内网中,但暴露给了外网。那你直接写外网的地址就好了,虽然内网的流量走了一次转发,但到底是内网,速度没啥影响。


    另外,我的 vue 项目就是使用相对路径的,平时代码中写死的路径是 /api/articles/xx 这种。ip 和端口不包括在里面。平时直接使用 vue.config.js 中的 devServer 访问后端服务。
    你们前端是怎么开发的?直接写完整路径,然后后端去掉同源限制吗?还是发给 nginx ,由 nginx 再发给前端 devServer 和后端服务器?
    jydeng
        9
    jydeng  
       2022-06-29 14:01:57 +08:00
    前端打包完直接发到 nginx ,你在 nginx 配置就行了。
    kongkx
        10
    kongkx  
       2022-06-29 14:07:08 +08:00 via iPhone
    开发时 devserver api 服务的 proxy ;生产时 nginx 做 api proxy 。 反正不搞跨域
    daliusu
        11
    daliusu  
       2022-06-29 14:08:37 +08:00
    可以动态配置,比如在实际打包的时候根据命令输入进去,打包到 index.html 的 meta 标签里,然后你的 js 直接读 meta 里定义的各种变量(也包括请求地址),这样的好处是,你不管在哪个平台,只需要一个能修改 index.html 的脚本同时只打包一次,就可以随意的修改各种参数信息。如果用 process.env 也是需要预先定义好的几个,如果环境少其实没有问题,但是如果你们那里环境非常多,比如同一个代码你可能要部署 abcdefg... n 个版本,并且每个版本的变量可能随时都不一样,用 process.env 局限就有点大了,nginx 就更别说了
    IvanLi127
        12
    IvanLi127  
       2022-06-29 14:10:31 +08:00
    不需要写死,转发的话,服务器顶得住就转发咯。不过不介意多请求一次的话,前端的 HTTP 服务器上存个后端的服务地址列表文件,前端直接用相对路径请求这个文件获取实际的后端地址,然后拿着地址去调接口也成呀。
    among
        13
    among  
    OP
       2022-06-29 14:23:53 +08:00
    现在的问题是,nginx 的配置是清楚的。
    但是前端同事不知道怎么搞,发布出来的应用,抓包看到的,还是直接连接后端的 ip 和端口。。
    wu67
        14
    wu67  
       2022-06-29 15:25:11 +08:00
    建议多看看文档, 估计是没区分两个环境直接就套了一个配置
    theohateonion
        15
    theohateonion  
       2022-06-29 15:30:23 +08:00
    @among 放到 nginx 上直接请求本域就可以了,要是不会弄让他自己查
    coolcoffee
        16
    coolcoffee  
       2022-06-29 15:45:53 +08:00
    前端我是建议不要走 nginx 反向代理接口,这样可以纯静态化丢到 cdn 里面去减少运维成本和服务宕机风险。所有的跨域请求都可以后端配置好 CORS 响应头。

    如果真的要配置 nginx 反向代理,那么也应该配置好一个域名,根据不同的域名去转发到不同的后端接口地址。
    molvqingtai
        17
    molvqingtai  
       2022-06-29 16:51:35 +08:00 via Android
    同 5 楼,api 写 .env 文件中
    darkengine
        18
    darkengine  
       2022-06-29 17:21:59 +08:00
    前端为啥要写死 IP ,用域名啊
    Gaays
        19
    Gaays  
       2022-06-29 17:28:39 +08:00
    前端可以打包请求 localhost/api/xxx ,后端 nginx 转发就好了
    snowlyg
        20
    snowlyg  
       2022-06-29 17:47:33 +08:00
    既然有反向代理的外网了,为什么还要考虑内网访问?统一走外网不就好了,写不写死都不是问题了。
    huangqihong
        21
    huangqihong  
       2022-06-29 17:47:58 +08:00
    @among 没有在 vue.config.js 中配置代理吗,还是用 axios 写死了 baseUrl ?
    darknoll
        22
    darknoll  
       2022-06-29 21:37:11 +08:00
    就直接 /api/*****
    2NUT
        23
    2NUT  
       2022-06-29 23:11:26 +08:00
    写死域名

    域名后反代理真实服务器
    lujiaosama
        24
    lujiaosama  
       2022-06-30 10:46:27 +08:00
    根据 node 环境(dev/test/prod)请求不同的域名 ,域名反向代理服务器. 服务器上 ng 配置怎么修改都不影响前端请求的.
    among
        25
    among  
    OP
       2022-06-30 13:01:06 +08:00
    在我的不断要求下,终于改好了。

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

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

    感谢各位。。
    zhuweiyou
        26
    zhuweiyou  
       2022-06-30 13:02:52 +08:00
    代码里一般是 /xxx/yyy 请求, webpack 或者 vite 里配一下 proxy 就好. 代码不用改, 不需要你那样配置 ENV
    关于     帮助文档     自助推广系统     博客     API     FAQ     Solana     5405 人在线   最高记录 6679       Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 36ms UTC 07:56 PVG 15:56 LAX 23:56 JFK 02:56
    Do have faith in what you're doing.
    ubao msn snddm index pchome yahoo rakuten mypaper meadowduck bidyahoo youbao zxmzxm asda bnvcg cvbfg dfscv mmhjk xxddc yybgb zznbn ccubao uaitu acv GXCV ET GDG YH FG BCVB FJFH CBRE CBC GDG ET54 WRWR RWER WREW WRWER RWER SDG EW SF DSFSF fbbs ubao fhd dfg ewr dg df ewwr ewwr et ruyut utut dfg fgd gdfgt etg dfgt dfgd ert4 gd fgg wr 235 wer3 we vsdf sdf gdf ert xcv sdf rwer hfd dfg cvb rwf afb dfh jgh bmn lgh rty gfds cxv xcv xcs vdas fdf fgd cv sdf tert sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf shasha9178 shasha9178 shasha9178 shasha9178 shasha9178 liflif2 liflif2 liflif2 liflif2 liflif2 liblib3 liblib3 liblib3 liblib3 liblib3 zhazha444 zhazha444 zhazha444 zhazha444 zhazha444 dende5 dende denden denden2 denden21 fenfen9 fenf619 fen619 fenfe9 fe619 sdf sdf sdf sdf sdf zhazh90 zhazh0 zhaa50 zha90 zh590 zho zhoz zhozh zhozho zhozho2 lislis lls95 lili95 lils5 liss9 sdf0ty987 sdft876 sdft9876 sdf09876 sd0t9876 sdf0ty98 sdf0976 sdf0ty986 sdf0ty96 sdf0t76 sdf0876 df0ty98 sf0t876 sd0ty76 sdy76 sdf76 sdf0t76 sdf0ty9 sdf0ty98 sdf0ty987 sdf0ty98 sdf6676 sdf876 sd876 sd876 sdf6 sdf6 sdf9876 sdf0t sdf06 sdf0ty9776 sdf0ty9776 sdf0ty76 sdf8876 sdf0t sd6 sdf06 s688876 sd688 sdf86