V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
among
V2EX  ›  Vue.js

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

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

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

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

    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
    liuw666
        6
    liuw666  
       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   ·   实用小工具   ·   2811 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 13:56 · PVG 21:56 · LAX 05:56 · JFK 08:56
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.