V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
guoke360
V2EX  ›  问与答

关于 vue 跨域访问遇到的一个神奇的 bug,想问问万能的 V 友有遇到过么

  •  1
     
  •   guoke360 · 2019-04-19 14:49:18 +08:00 · 9842 次点击
    这是一个创建于 958 天前的主题,其中的信息可能已经有所发展或是发生改变。

    楼主在做一个 vue 的项目的时候遇到了跨域访问的问题,后来采取了代理的解决方案 proxyTable: { '/api': { target: '',//设置你调用的接口域名和端口号 changeOrigin: true, //跨域 pathRewrite: { '^/api': '' // }, }, 这边使用了之后经过测试本地使用 get 接口访问基本上没有啥问题,但是一旦使用了 post 接口并且带参数的情况下就会直接没反应(经过测试觉得是代理没有被启用 Error occurred while trying to proxy request /shop/order_pay from localhost to https: (ECONNRESET) ( https://nodejs.org/api/errors.html#errors_common_system_errors) npm 直接抱着个错误 http 的返回值也是 504 Gateway Timeout 经过测试接口丢到线上访问没有问题 但是开发环境还是无法与后端 POSt 握手成功 试了下 get 参数传递入参却没有问题,谷歌了半天好像大部分也没有遇到过这种情况想问一下万能的 V 友有啥解决方案么(本地写个了 node 程序直接 post 链接感觉没啥问题,想了半天想不出是什么问题

    35 条回复    2019-04-19 23:37:20 +08:00
    guoke360
        1
    guoke360  
    OP
       2019-04-19 14:49:51 +08:00
    楼主在做一个 vue 的项目的时候遇到了跨域访问的问题,后来采取了代理的解决方案
    proxyTable: {
    '/api': {
    target: '',//设置你调用的接口域名和端口号
    changeOrigin: true, //跨域
    pathRewrite: {
    '^/api': '' //
    },
    },
    这边使用了之后经过测试本地使用 get 接口访问基本上没有啥问题,但是一旦使用了 post 接口并且带参数的情况下就会直接没反应(经过测试觉得是代理没有被启用
    Error occurred while trying to proxy request /shop/order_pay from localhost to https:
    (ECONNRESET) ( https://nodejs.org/api/errors.html#errors_common_system_errors)
    npm 直接抱着个错误 http 的返回值也是 504 Gateway Timeout
    经过测试接口丢到线上访问没有问题
    但是开发环境还是无法与后端 POSt 握手成功
    试了下 get 参数传递入参却没有问题,谷歌了半天好像大部分也没有遇到过这种情况想问一下万能的 V 友有啥解决方案么(本地写个了 node 程序直接 post 链接感觉没啥问题,想了半天想不出是什么问题
    额上面的格式太乱了试试看这样会好一点么
    fishlium
        2
    fishlium  
       2019-04-19 14:57:57 +08:00
    是 option 请求报错了么?
    guoke360
        3
    guoke360  
    OP
       2019-04-19 15:01:07 +08:00
    @fishlium Request failed with status code 504 http 直接报错 504 超时鸭,后台和我说都没有进入接口..我感觉像是代理失效了一样
    romoo
        4
    romoo  
       2019-04-19 15:08:12 +08:00
    加上 xfwd: false 试试
    guoke360
        5
    guoke360  
    OP
       2019-04-19 15:21:07 +08:00
    @romoo 不行啊,还是 504
    wly19960911
        6
    wly19960911  
       2019-04-19 15:34:20 +08:00
    pathRewrite 去掉看看。你具体看看 pathRewrite 干什么的就知道了
    deepdark
        7
    deepdark  
       2019-04-19 15:37:06 +08:00 via Android
    应该是 options 方法爆了后端,504 是后端的锅,让后端检查是否支持 options 方法
    Terry05
        8
    Terry05  
       2019-04-19 15:40:27 +08:00
    能好好排版下吗
    guoke360
        9
    guoke360  
    OP
       2019-04-19 15:43:17 +08:00
    @wly19960911 pathRewrite 查了下是替换代理,我把他删掉以后改了下格式但是好像我自己没有发送过去,这个是最郁闷的。
    guoke360
        10
    guoke360  
    OP
       2019-04-19 15:43:55 +08:00
    @deepdark 放到线上以后好像就没问题了,post 后端操作也是正常的,郁闷的地方也是在这一点
    wly19960911
        11
    wly19960911  
       2019-04-19 15:49:47 +08:00
    @guoke360 #10 线上不存在 反向代理。

    proxyTable: {
    '/api': {
    target: 'example.com/project',
    changeOrigin: true, //跨域
    pathRewrite: {
    '^/api': '' //
    },
    },

    这个规则的话,假设有个请求 是 /api/user/1.
    会转发成 example.com/project/user/1; 我说明下,我不清楚你具体怎么设置的,你参考看看你的写法是不是符合你要求?
    Lax
        12
    Lax  
       2019-04-19 15:51:13 +08:00
    是 localhost 发起的 OPTIONS 请求?
    504 一定会在服务端产生日志的,可能在负载均衡就被拦下来了
    guoke360
        13
    guoke360  
    OP
       2019-04-19 15:54:57 +08:00
    @wly19960911 先感谢下层主抽出时间,我现在遇到的问题查了下好像是走了代理以后协议发送不出去(仅限 post 方式并且传入了参数的情况下),正常 get 方法到后台都没有问题,这个也是目前最郁闷的地方
    wly19960911
        14
    wly19960911  
       2019-04-19 15:57:51 +08:00
    @guoke360 #13 不好意思,写着写着都忘记了这个问题.....丢人了
    guoke360
        15
    guoke360  
    OP
       2019-04-19 16:01:00 +08:00
    @Lax 后端那好像根本接收不到,好像我发送的请求在本地被拦截了
    wake1bear
        16
    wake1bear  
       2019-04-19 16:10:51 +08:00
    用 easymock 建一个 post 接口发过去试试,如果没问题,那估计是后端把 options 请求给拦掉了
    jin5354
        17
    jin5354  
       2019-04-19 16:14:34 +08:00
    打开浏览器控制台看发出去的请求,是不是 options 的问题
    guoke360
        18
    guoke360  
    OP
       2019-04-19 16:22:35 +08:00
    @jin5354 额这个怎么看啊 Error occured while trying to proxy to:接口的返回值直接是这个,看了下感觉好像没发出去
    XHR 的报错是 XHR failed loading 这个
    jin5354
        19
    jin5354  
       2019-04-19 16:28:44 +08:00
    @guoke360 chrome 浏览器,command+option+i 或者 f12 开控制台,进入 network 面板点击 XHR。。。
    v2chou
        20
    v2chou  
       2019-04-19 16:30:50 +08:00
    Error occured while trying to proxy to: 搜这个很多人出现这个问题啊,按他们的解决方法试试吧,代码都没有详细贴出,怎么叫人排查问题
    guoke360
        21
    guoke360  
    OP
       2019-04-19 16:32:38 +08:00
    @jin5354 hhh 这个肯定知道啊,Preview 就是我之前发的的 Error occured while trying to proxy to:本地域名这个啊
    下面那个是我抓的 node 包的报错,post 报错直接就是 504 链接超时
    guoke360
        22
    guoke360  
    OP
       2019-04-19 16:37:33 +08:00
    @v2chou 大部分都是配置失败啊,我这个最尴尬的和郁闷的是 post 这一个单一操作失败...排查我都做全了,出了问题的地方在于本地使用代理进行 post 操作的时候如果使用['Content-Type']中的'application/x-www-form-urlencoded'情况下使用 qs 格式化传递入参会直接导致 post 失败 ,使用 get 传递参数或者不传递参数进行单一 post 操作则没有问题
    我一开始认为是自己的数据格式有问题于是把自己的代码丢到线上去了然后发现线上的操作是没有问题但是本地使用会报错
    然后自己又进入不知道从哪入手排查的死循环
    TomVista
        23
    TomVista  
       2019-04-19 16:40:33 +08:00
    你在本地用的 loacalhost:port 吗?
    guoke360
        24
    guoke360  
    OP
       2019-04-19 16:43:31 +08:00
    @TomVista 是的我的主要问题是在 loacalhost 的情况下需要跨域访问接口,然后写了一个代理
    TomVista
        25
    TomVista  
       2019-04-19 16:47:28 +08:00
    @guoke360 尝试改成本机 ip 试试,全部替换为 ip:port 格式,不保证解决问题..
    deepred
        26
    deepred  
       2019-04-19 16:54:57 +08:00
    线上环境是怎么解决跨域的?还是说线上环境没跨域
    guoke360
        27
    guoke360  
    OP
       2019-04-19 16:57:15 +08:00
    @deepred 线上不存在跨域问题,这个跨域问题主要在于本地的时候使用传参的 post 方法无法成功..
    rain0002009
        28
    rain0002009  
       2019-04-19 17:17:03 +08:00
    你们 api 服务器是 https 的?
    wy
        29
    wy  
       2019-04-19 17:23:57 +08:00
    你看看前端的报错信息,我想在发 POST 请求之前可能有一个 OPTION 请求,如果有,那么需要后端支持一下 OPTION 请求
    deepred
        30
    deepred  
       2019-04-19 17:32:17 +08:00
    @wy 他本地用 proxy,就不存在跨域了,相当于开了个 node 服务器帮他去请求 api 服务器。不会像实际的 cors 预先发个 option
    serge001
        31
    serge001  
       2019-04-19 17:48:06 +08:00
    开了代理, 所有的请求都是发到本地的,怎么可能还会有 Options 的请求呢, 所以问题最有可能是后端服务器有问题, 或者你更新下本地的 dev-server 版本
    deepred
        32
    deepred  
       2019-04-19 18:01:12 +08:00
    @guoke360 建议把 vue-cli 升到最新版本然后开个 demo 项目,再试下代理发送 ajaxhttps://www.v2ex.com/
    guoke360
        33
    guoke360  
    OP
       2019-04-19 18:13:55 +08:00
    @deepred 谢谢,我再去试试看把,不行的话就在线上环境做开发...
    aprilandjan
        34
    aprilandjan  
       2019-04-19 18:21:06 +08:00 via iPhone
    接口服务器是 https 的话最好要给 proxy 配置 secure: false 禁掉 node 的 ssl 检查
    ODD10
        35
    ODD10  
       2019-04-19 23:37:20 +08:00 via iPhone
    为什么不截个图,network+console 的截图
    关于   ·   帮助文档   ·   API   ·   FAQ   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   3050 人在线   最高记录 5497   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 10:33 · PVG 18:33 · LAX 02:33 · JFK 05:33
    ♥ Do have faith in what you're doing.