未分類
30 10 月 2020

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

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

資深大佬 : asionbo 5

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

大佬有話說 (40)

  • 資深大佬 : sixway

    不知道你想要表达什么意思，

  • 主 資深大佬 : asionbo

    比如 vue 正式访问的是 http://api/v1，同时，我想访问本地的某个服务 http://api/v3,
    v1 服务在云端，v3 一定是部署在运行 vue 浏览器的机器上。这种怎么实现

  • 資深大佬 : winnerczwx

    后端允许跨域

  • 資深大佬 : opengps

    调用本地是指用户的 pc 本地？这时候你直接访问 127.0.0.1 就行了，但是话说回来，你的客户一定本地有站点吗？

  • 資深大佬 : ZSeptember

    代理

  • 資深大佬 : jinliming2

    @asionbo 你域名都是 api ？
    本地改 hosts，域名 api 指向本地 127.0.0.1，然后本地开个 nginx，/v1/ proxy 到远程，通过 IP 反向代理指定 host 头。/v3/ proxy 到本地服务。
    除了 nginx，也可以用其他的 proxy 程序，比如 http-proxy

  • 資深大佬 : kiwier

    把本地服务内网穿透到公网上

  • 資深大佬 : JerryCha

    本地既然运行了一个服务，那让这个服务替你请求不就好了。
    或许你们没法插手本地服务的开发？

  • 資深大佬 : cccp2020

    最直白让后端设置跨域白名单，随便跨

  • 資深大佬 : muzuiget

    反向代理了解一下。

  • 資深大佬 : jiangzm

    最好的方法就是本地代理下，可以全部请求转到本地服务器，或者浏览器安装个 SwitchyOmega 设置下需要代理的地址。

  • 資深大佬 : RickyC

    可尝试:

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

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

    重启 nGinx 服务后可以用 http://本地地址 /api 访问到远程的 api

  • 資深大佬 : galikeoy

    @RickyC #12 为什么你的 nGinx 是 G 大写的？

  • 資深大佬 : GressJoe

    @galikeoy 哈哈哈哈

  • 資深大佬 : yaphets666

    你本机上的服务只有内网能访问到.因为你的本机没有暴露到互联网上去.但是你的前端部署在互联网服务器当中.所以要把你的本机要有公网 IP.不然无法访问,这和代理没有关系.

  • 資深大佬 : xylophone21

    跨域跨域，跨的是域名，结果你把最重要的域名信息隐藏了

  • 資深大佬 : tikazyq

    主百度一下“跨域的几种方式”，以后不要再到 v2 上做伸手党，下次看到直接拿

  • 資深大佬 : tikazyq

    估计主是指一部分接口调服务端，一部分开发的接口调本地，你都有本地接口了，为啥不直接全部调本地

  • 資深大佬 : belin520

    用了 Vue 的人，感觉连 JavaScript 是什么都不知道了，全世界都只有 Vue，只有 Vue 的解决办法。
    利益相关：最早一批 VueJS 用户

  • 資深大佬 : Saszr

    看一下 nginx 相关的知识
    proxy_pass ？

  • 資深大佬 : fumichael

    @belin520 #18 emmmmm，深有同感

  • 資深大佬 : richzhu

    真心感觉 跨域应该要后端来解决，而不是前端和运维

  • 資深大佬 : angryfish

    让后端允许跨域访问

  • 資深大佬 : sparkinglemon

    的确应该后端解决，如果前端能够了解跨域的原因也能加速排查避免浪费时间

  • 資深大佬 : RickyC

    @richzhu 请问一下, 负责搭环境的是后端还是运维? 我觉得应该运维负责搭环境.

  • 資深大佬 : richzhu

    @RickyC 环境当然是运维呀，不过跨域是在后端代码中实现的，因为有的时候运维来设置跨域会开放权限过大，就相当于干掉跨域，并且是整个 nginx 中的设置，导致整个项目就真的没有跨域限制了

  • 資深大佬 : Sapp

    @belin520 然而 vue3 在自己造 api 的道路上越走越远，已经开始魔改 js 了（ ref ）

  • 資深大佬 : jiangnan01

    如果后者也存在跨域问题，再加一条代理不就完了？如果后者不存在，那么在 api 目录下请求的 url 头不使用代理的那个头就可以了。让后台允许跨域不说安不安全还要搞出一堆复杂请求的处理，碰到不好商量的后端为这破事耽误摸鱼时间不值得。

  • 資深大佬 : dswyzx

    鄙人后端,对 vue 仅限于 demo 层面.同样的跨域问题,后端设置跨域成功并手写 js 测试没有问题.但 vue 对接方表示还是没办法跨域,他本地开发时候在 vue 里设置的本地代理,上线嫌配置麻烦,最后解决方案是运维设置 nginx 转发固定 route 实现跨域.
    不懂就问:vue 什么时候跨域还不如原生 javescript 的好使了

  • 資深大佬 : securityCoding

    nginx proxy

  • 資深大佬 : dswyzx

    @dswyzx 哈哈,念作 加屋丝块普特,怎么写作 javascript 的

  • 資深大佬 : iseki

    不懂就问：跨域为什么会和 Vue 扯上

  • 資深大佬 : jiangnan01

    @dswyzx 生产环境配代理不在 nginx 配在哪配啊？

  • 資深大佬 : Keyes

    我之前是这样做的，因为要取一个本地的真实路径存到云端
    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

    @jiangnan01 作为前端站点,后端不同域名的不同服务直接调用呗. 比如 client 直接调用 server1,server2. 走 ng 转发岂不相当于 client 调用 server1 然后分发到 server2.
    我只是纳闷 vue 比 js 有什么特殊之处吗

  • 資深大佬 : myCupOfTea

    用 nginx 代理走不就号了么

  • 資深大佬 : DOLLOR

    @iseki
    想起来，十年前也是“怎么用 jquery 打开新窗口”、“怎么用 jquery 拼接字符串”、“怎么用 jquery 打印控制台”……各种“万能”的 jquery 。

  • 資深大佬 : jiangnan01

    @dswyzx 那你这不还是后端解决跨域嘛

  • 資深大佬 : RickyC

    @jiangnan01 前端有办法解决跨域吗? 没有吧.

  • 資深大佬 : jiangnan01

    @RickyC 是没有啊，我的意思是想说“vue 什么时候跨域还不如原生 javescript 的好使了”，难道原生 JS 可以跨域？