V2EX = way to explore
V2EX 是一个关于分享和探索的地方
Sign Up Now
For Existing Member  Sign In
asionbo
V2EX  ›  Vue.js

Vue 正式环境跨域问题,调用的云端服务,想再调用本地服务,各位大佬,这个怎么搞?

  •  
  •   asionbo · Nov 16, 2020 · 5082 views
    This topic created in 1995 days ago, the information mentioned may be changed or developed.

    vue 正式打包后,服务在云端,想同时调用本地某个服务。

    Supplement 1  ·  Nov 17, 2020

    是这样的,可能我上面描述不太清楚,我想让我浏览器上的vue程序绕过跨域,访问运行在本地的服务

    DZWMEF.png

    https://imgchr.com/i/DZWMEF

    Supplement 2  ·  Nov 21, 2020

    最终后端解决

    response.setHeader("Access-Control-Allow-Origin", ""); response.setHeader("Access-Control-Allow-Methods", ""); response.setHeader("Access-Control-Allow-Headers", "x-requested-with,content-type");

    40 replies    2020-11-18 11:21:52 +08:00
    sixway
        1
    sixway  
       Nov 16, 2020
    不知道你想要表达什么意思,
    asionbo
        2
    asionbo  
    OP
       Nov 16, 2020
    比如 vue 正式访问的是 http://api/v1,同时,我想访问本地的某个服务 http://api/v3,
    v1 服务在云端,v3 一定是部署在运行 vue 浏览器的机器上。这种怎么实现
    winnerczwx
        3
    winnerczwx  
       Nov 16, 2020 via iPhone   ❤️ 1
    后端允许跨域
    opengps
        4
    opengps  
       Nov 16, 2020
    调用本地是指用户的 pc 本地?这时候你直接访问 127.0.0.1 就行了,但是话说回来,你的客户一定本地有站点吗?
    looplj
        5
    looplj  
       Nov 16, 2020   ❤️ 1
    代理
    jinliming2
        6
    jinliming2  
       Nov 16, 2020
    @asionbo 你域名都是 api ?
    本地改 hosts,域名 api 指向本地 127.0.0.1,然后本地开个 nginx,/v1/ proxy 到远程,通过 IP 反向代理指定 host 头。/v3/ proxy 到本地服务。
    除了 nginx,也可以用其他的 proxy 程序,比如 http-proxy
    kiwier
        7
    kiwier  
       Nov 16, 2020 via iPhone
    把本地服务内网穿透到公网上
    JerryCha
        8
    JerryCha  
       Nov 16, 2020
    本地既然运行了一个服务,那让这个服务替你请求不就好了。
    或许你们没法插手本地服务的开发?
    cccp2020
        9
    cccp2020  
       Nov 17, 2020 via iPhone
    最直白让后端设置跨域白名单,随便跨
    muzuiget
        10
    muzuiget  
       Nov 17, 2020
    反向代理了解一下。
    jiangzm
        11
    jiangzm  
       Nov 17, 2020
    最好的方法就是本地代理下,可以全部请求转到本地服务器,或者浏览器安装个 SwitchyOmega 设置下需要代理的地址。
    RickyC
        12
    RickyC  
       Nov 17, 2020
    可尝试:

    打开网站 nGinx 配置文件, 在 Server 的{}, 加入如下代码

    #解决远程跨域问题
    location /api/ {
    proxy_pass http://远程服务器地址 /api/;
    }

    重启 nGinx 服务后可以用 http://本地地址 /api 访问到远程的 api
    dfourc
        13
    dfourc  
       Nov 17, 2020   ❤️ 3
    @RickyC #12 为什么你的 nGinx 是 G 大写的?
    GressJoe
        14
    GressJoe  
       Nov 17, 2020
    @galikeoy 哈哈哈哈
    yaphets666
        15
    yaphets666  
       Nov 17, 2020
    你本机上的服务只有内网能访问到.因为你的本机没有暴露到互联网上去.但是你的前端部署在互联网服务器当中.所以要把你的本机要有公网 IP.不然无法访问,这和代理没有关系.
    xylophone21
        16
    xylophone21  
       Nov 17, 2020
    跨域跨域,跨的是域名,结果你把最重要的域名信息隐藏了
    tikazyq
        17
    tikazyq  
       Nov 17, 2020
    楼主百度一下“跨域的几种方式”,以后不要再到 v2 上做伸手党,下次看到直接拿🔨敲头
    tikazyq
        18
    tikazyq  
       Nov 17, 2020
    估计楼主是指一部分接口调服务端,一部分开发的接口调本地,你都有本地接口了,为啥不直接全部调本地
    icanfork
        19
    icanfork  
       Nov 17, 2020   ❤️ 2
    用了 Vue 的人,感觉连 JavaScript 是什么都不知道了,全世界都只有 Vue,只有 Vue 的解决办法。
    利益相关:最早一批 VueJS 用户
    Saszr
        20
    Saszr  
       Nov 17, 2020
    看一下 nginx 相关的知识
    proxy_pass ?
    fumichael
        21
    fumichael  
       Nov 17, 2020
    @belin520 #18 emmmmm,深有同感
    richzhu
        22
    richzhu  
       Nov 17, 2020
    真心感觉 跨域应该要后端来解决,而不是前端和运维
    GBdG6clg2Jy17ua5
        23
    GBdG6clg2Jy17ua5  
       Nov 17, 2020 via iPhone
    让后端允许跨域访问
    sparkinglemon
        24
    sparkinglemon  
       Nov 17, 2020 via iPhone
    的确应该后端解决,如果前端能够了解跨域的原因也能加速排查避免浪费时间
    RickyC
        25
    RickyC  
       Nov 17, 2020
    @richzhu 请问一下, 负责搭环境的是后端还是运维? 我觉得应该运维负责搭环境.
    richzhu
        26
    richzhu  
       Nov 17, 2020   ❤️ 1
    @RickyC 环境当然是运维呀,不过跨域是在后端代码中实现的,因为有的时候运维来设置跨域会开放权限过大,就相当于干掉跨域,并且是整个 nginx 中的设置,导致整个项目就真的没有跨域限制了
    Sapp
        27
    Sapp  
       Nov 17, 2020
    @belin520 然而 vue3 在自己造 api 的道路上越走越远,已经开始魔改 js 了( ref )
    jiangnan01
        28
    jiangnan01  
       Nov 17, 2020
    如果后者也存在跨域问题,再加一条代理不就完了?如果后者不存在,那么在 api 目录下请求的 url 头不使用代理的那个头就可以了。让后台允许跨域不说安不安全还要搞出一堆复杂请求的处理,碰到不好商量的后端为这破事耽误摸鱼时间不值得。
    dswyzx
        29
    dswyzx  
       Nov 17, 2020
    鄙人后端,对 vue 仅限于 demo 层面.同样的跨域问题,后端设置跨域成功并手写 js 测试没有问题.但 vue 对接方表示还是没办法跨域,他本地开发时候在 vue 里设置的本地代理,上线嫌配置麻烦,最后解决方案是运维设置 nginx 转发固定 route 实现跨域.
    不懂就问:vue 什么时候跨域还不如原生 javescript 的好使了
    securityCoding
        30
    securityCoding  
       Nov 17, 2020
    nginx proxy
    dswyzx
        31
    dswyzx  
       Nov 17, 2020
    @dswyzx 哈哈,念作 加屋丝块普特,怎么写作 javascript 的
    iseki
        32
    iseki  
       Nov 17, 2020
    不懂就问:跨域为什么会和 Vue 扯上
    jiangnan01
        33
    jiangnan01  
       Nov 17, 2020
    @dswyzx 生产环境配代理不在 nginx 配在哪配啊?
    Keyes
        34
    Keyes  
       Nov 17, 2020
    我之前是这样做的,因为要取一个本地的真实路径存到云端
    https://cloud.example.com A 记录 -> 云端
    https://local.example.com A 记录 -> 127.0.0.1

    至于本机的 https 问题,装 Client 时候直接给系统上了一个自签证书,步骤大概是:
    1 、生成一个 ROOT CA (自签)
    2 、ROOT CA 签一个服务器证书(CA=False, cn=local.example.com)
    3 、删掉 ROOT CA 的私钥(安全 tips,防止被利用)
    dswyzx
        35
    dswyzx  
       Nov 17, 2020
    @jiangnan01 作为前端站点,后端不同域名的不同服务直接调用呗. 比如 client 直接调用 server1,server2. 走 ng 转发岂不相当于 client 调用 server1 然后分发到 server2.
    我只是纳闷 vue 比 js 有什么特殊之处吗
    myCupOfTea
        36
    myCupOfTea  
       Nov 18, 2020
    用 nginx 代理走不就号了么
    AV1
        37
    AV1  
       Nov 18, 2020
    @iseki
    想起来,十年前也是“怎么用 jquery 打开新窗口”、“怎么用 jquery 拼接字符串”、“怎么用 jquery 打印控制台”……各种“万能”的 jquery 。🐶
    jiangnan01
        38
    jiangnan01  
       Nov 18, 2020
    @dswyzx 那你这不还是后端解决跨域嘛
    RickyC
        39
    RickyC  
       Nov 18, 2020
    @jiangnan01 前端有办法解决跨域吗? 没有吧.
    jiangnan01
        40
    jiangnan01  
       Nov 18, 2020
    @RickyC 是没有啊,我的意思是想说“vue 什么时候跨域还不如原生 javescript 的好使了”,难道原生 JS 可以跨域?
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   2686 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 170ms · UTC 03:31 · PVG 11:31 · LAX 20:31 · JFK 23:31
    ♥ Do have faith in what you're doing.