关于 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]

@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 的截图