Chrome 开发者工具中 Network 无法看到跨域请求的 Response

[MungBeanSoup]

前后端分别部署在两个域名上,用 CORS 解决请求跨域的问题,但是在 Chrome 开发者工具里看不到 Response 的 body 数据,firefox 原生开发者工具和 firebug 都能看到. Chrome 显示"This request has no response data available"

[chairuosen]

你看的是 OPTIONS 请求吧? 看下一个长的一样的正常请求

[MungBeanSoup]

@chairuosen 看的不是 OPTIONS 请求,是实际的 POST 请求

[chairuosen]

@MungBeanSoup console 里没任何错误信息？请求详情截个图

[SourceMan]

一句话，你这个标题不成立，原因自找 （希望不要打脸）

[MungBeanSoup]

@chairuosen
OPTIONS 请求

POST 请求

POST 请求返回数据看不见

[chairuosen]

@MungBeanSoup 先排除一下服务端原因，右键 POST 请求， copy->as curl 然后在命令行里执行看一下有没有返回结果。
然后试试 fetch('https://api.weibo.com')
如果也没有返回，那你的 devtool 可能是假的。。。

[580a388da131]

@MungBeanSoup 下次发图时把中间替换成 large 。

[MungBeanSoup]

@chairuosen 在命令行打印返回体是有内容的,firefox 也是能在开发者工具看到的,服务端的原因可以排除.
fetch 的话可以看到返回

[chairuosen]

@MungBeanSoup 把 har 发上来吧 network 里右键 save as HAR with content

[MungBeanSoup]

@chairuosen V2 该怎么发附件...百度云么?

[MungBeanSoup]

这个问题暂时解决了.可能是 OPTIONS 预请求干扰了 Chrome 对请求的判断,通过服务端返回 Access-Control-Max-Age 头让浏览器缓存 OPTIONS 请求,这样在之后的请求之前不会发送 OPTIONS 请求,也就不会出现看不到 response 的问题(但是 OPTIONS 请求没有被缓存的那些请求第一次还是会出现这个问题).暂时不知道是 Chrome 的 BUG 还是我有别的地方处理地不好
前端:vue+vue-resource+webpack
后端:PHP+nginx

[chairuosen]

@MungBeanSoup 这并没有解决问题，我觉得问题应该是其他 Access-Control 头没有设置正确

[MungBeanSoup]

@chairuosen 能看到与不能看到的区别只是之前有没有一个 OPTIONS 请求,其他 Access-Control 头都是一样的 我倾向于 chrome 短时间内发现两个 url 相同的请求可能会有一些不可预测的行为

[chairuosen]

@MungBeanSoup 不不，那个 OPTIONS 是正常的探测，我们跟你一样。
你把 Access-Control 头只留一个 Allow-Origin:* 一个 Allow-Headers:Content-Type 试试。我一般只用这俩个，是没问题的，你看一下你只用这俩有没有问题。
另外一个问题， Chrome 里 JS 代码能收到数据么？只是 devtool 显示问题？

[MungBeanSoup]

@chairuosen 只留了这两个头依然有这样的清空.
JS 是可以收到数据的,所以我觉得可能是 Chrome 自身的原因,这个 BUG 不影响开发只影响开发效率.

[MungBeanSoup]

@chairuosen
本地环境-Mac#1-Chrome-DevTool-看不见
本地环境-Mac#2-Chrome-DevTool-看不见
本地环境-Mac#3-Chrome-DevTool-看得见
本地环境-Mac-Chrome-JS-看得见
本地环境-Mac-Firefox-DevTool-看得见

测试服务器-Mac#1-Chrome-DevTool-看不见
测试服务器-Mac#2-Chrome-DevTool-看不见
测试服务器-Mac#3-Chrome-DevTool-看得见???
测试服务器-Mac#4-Chrome-DevTool-看得见???
测试服务器-Win-Chrome-DevTool-看不见


所以现在问题变成了我和某两个同事的 Chrome 配置有什么问题了么....

[chairuosen]

@MungBeanSoup 。。。看来是 Chrome 的问题，看一下 Chrome 版本的区别？

[MungBeanSoup]

@chairuosen 一语惊醒梦中人啊!能看到的都是 55 的 看不到的都是 56 的

[chairuosen]

@MungBeanSoup 很有可能是编码问题， 56 开始不自动适应编码了

[chairuosen]

@chairuosen 收回这句话，这仅仅是从 56 猜到的，可能性不打，因为你没 OPTIONS 是正常的。