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

[guoke360]

楼主在做一个 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 链接感觉没啥问题，想了半天想不出是什么问题

[guoke360]

楼主在做一个 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]

是 option 请求报错了么？

[guoke360]

@fishlium Request failed with status code 504 http 直接报错 504 超时鸭，后台和我说都没有进入接口..我感觉像是代理失效了一样

[romoo]

加上 xfwd: false 试试

[guoke360]

@romoo 不行啊，还是 504

[wly19960911]

pathRewrite 去掉看看。你具体看看 pathRewrite 干什么的就知道了

[deepdark]

应该是 options 方法爆了后端，504 是后端的锅，让后端检查是否支持 options 方法

[Terry05]

能好好排版下吗

[guoke360]

@wly19960911 pathRewrite 查了下是替换代理，我把他删掉以后改了下格式但是好像我自己没有发送过去，这个是最郁闷的。

[guoke360]

@deepdark 放到线上以后好像就没问题了，post 后端操作也是正常的，郁闷的地方也是在这一点

[wly19960911]

@guoke360 #10 线上不存在 反向代理。

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

这个规则的话，假设有个请求 是 /api/user/1.
会转发成 example.com/project/user/1; 我说明下，我不清楚你具体怎么设置的，你参考看看你的写法是不是符合你要求?

[Lax]

是 localhost 发起的 OPTIONS 请求？
504 一定会在服务端产生日志的，可能在负载均衡就被拦下来了

[guoke360]

@wly19960911 先感谢下层主抽出时间，我现在遇到的问题查了下好像是走了代理以后协议发送不出去(仅限 post 方式并且传入了参数的情况下)，正常 get 方法到后台都没有问题，这个也是目前最郁闷的地方

[wly19960911]

@guoke360 #13 不好意思，写着写着都忘记了这个问题.....丢人了

[guoke360]

@Lax 后端那好像根本接收不到，好像我发送的请求在本地被拦截了

[wake1bear]

用 easymock 建一个 post 接口发过去试试，如果没问题，那估计是后端把 options 请求给拦掉了

[jin5354]

打开浏览器控制台看发出去的请求，是不是 options 的问题

[guoke360]

@jin5354 额这个怎么看啊 Error occured while trying to proxy to:接口的返回值直接是这个，看了下感觉好像没发出去
XHR 的报错是 XHR failed loading 这个

[jin5354]

@guoke360 chrome 浏览器，command+option+i 或者 f12 开控制台，进入 network 面板点击 XHR。。。

[v2chou]

Error occured while trying to proxy to: 搜这个很多人出现这个问题啊，按他们的解决方法试试吧，代码都没有详细贴出，怎么叫人排查问题

[guoke360]

@jin5354 hhh 这个肯定知道啊，Preview 就是我之前发的的 Error occured while trying to proxy to:本地域名这个啊
下面那个是我抓的 node 包的报错，post 报错直接就是 504 链接超时

[guoke360]

@v2chou 大部分都是配置失败啊，我这个最尴尬的和郁闷的是 post 这一个单一操作失败...排查我都做全了，出了问题的地方在于本地使用代理进行 post 操作的时候如果使用['Content-Type']中的'application/x-www-form-urlencoded'情况下使用 qs 格式化传递入参会直接导致 post 失败 ，使用 get 传递参数或者不传递参数进行单一 post 操作则没有问题
我一开始认为是自己的数据格式有问题于是把自己的代码丢到线上去了然后发现线上的操作是没有问题但是本地使用会报错
然后自己又进入不知道从哪入手排查的死循环

[TomVista]

你在本地用的 loacalhost:port 吗?

[guoke360]

@TomVista 是的我的主要问题是在 loacalhost 的情况下需要跨域访问接口，然后写了一个代理

[TomVista]

@guoke360 尝试改成本机 ip 试试,全部替换为 ip:port 格式,不保证解决问题..

[deepred]

线上环境是怎么解决跨域的？还是说线上环境没跨域

[guoke360]

@deepred 线上不存在跨域问题，这个跨域问题主要在于本地的时候使用传参的 post 方法无法成功..

[rain0002009]

你们 api 服务器是 https 的？

[wy]

你看看前端的报错信息，我想在发 POST 请求之前可能有一个 OPTION 请求，如果有，那么需要后端支持一下 OPTION 请求

[deepred]

@wy 他本地用 proxy，就不存在跨域了，相当于开了个 node 服务器帮他去请求 api 服务器。不会像实际的 cors 预先发个 option

[serge001]

开了代理, 所有的请求都是发到本地的,怎么可能还会有 Options 的请求呢, 所以问题最有可能是后端服务器有问题, 或者你更新下本地的 dev-server 版本

[deepred]

@guoke360 建议把 vue-cli 升到最新版本然后开个 demo 项目，再试下代理发送 ajaxhttps://www.v2ex.com/

[guoke360]

@deepred 谢谢，我再去试试看把，不行的话就在线上环境做开发...

[aprilandjan]

接口服务器是 https 的话最好要给 proxy 配置 secure: false 禁掉 node 的 ssl 检查

[uTOmOuk3L6sb4MSI]

为什么不截个图，network+console 的截图