Chrome 开发者工具中 Network 无法看到跨域请求的 Response
MungBeanSoup · 2017-02-16 16:23:16 +08:00 · 17350 次点击这是一个创建于 2836 天前的主题，其中的信息可能已经有所发展或是发生改变。
前后端分别部署在两个域名上,用 CORS 解决请求跨域的问题,但是在 Chrome 开发者工具里看不到 Response 的 body 数据,firefox 原生开发者工具和 firebug 都能看到. Chrome 显示"This request has no response data available"
 |
1
chairuosen 2017-02-16 16:29:27 +08:00  1
你看的是 OPTIONS 请求吧? 看下一个长的一样的正常请求
|
 |
2
MungBeanSoup OP @chairuosen 看的不是 OPTIONS 请求,是实际的 POST 请求
|
|
3
chairuosen 2017-02-16 16:38:54 +08:00
@MungBeanSoup console 里没任何错误信息？请求详情截个图
|
 |
4
SourceMan 2017-02-16 16:40:30 +08:00
一句话，你这个标题不成立，原因自找 （希望不要打脸）
|
|
5
MungBeanSoup OP |
|
6
chairuosen 2017-02-16 17:21:01 +08:00
@MungBeanSoup 先排除一下服务端原因，右键 POST 请求， copy->as curl 然后在命令行里执行看一下有没有返回结果。
然后试试 fetch('https://api.weibo.com') 如果也没有返回，那你的 devtool 可能是假的。。。 |
 |
7
580a388da131 2017-02-16 17:46:48 +08:00 1
@MungBeanSoup 下次发图时把中间替换成 large 。
|
|
8
MungBeanSoup OP @chairuosen 在命令行打印返回体是有内容的,firefox 也是能在开发者工具看到的,服务端的原因可以排除.
fetch 的话可以看到返回 |
|
9
chairuosen 2017-02-16 17:58:53 +08:00
@MungBeanSoup 把 har 发上来吧 network 里右键 save as HAR with content
|
|
10
MungBeanSoup OP @chairuosen V2 该怎么发附件...百度云么?
|
|
11
MungBeanSoup OP 这个问题暂时解决了.可能是 OPTIONS 预请求干扰了 Chrome 对请求的判断,通过服务端返回 Access-Control-Max-Age 头让浏览器缓存 OPTIONS 请求,这样在之后的请求之前不会发送 OPTIONS 请求,也就不会出现看不到 response 的问题(但是 OPTIONS 请求没有被缓存的那些请求第一次还是会出现这个问题).暂时不知道是 Chrome 的 BUG 还是我有别的地方处理地不好
前端:vue+vue-resource+webpack 后端:PHP+nginx |
|
12
chairuosen 2017-02-16 18:48:11 +08:00
@MungBeanSoup 这并没有解决问题，我觉得问题应该是其他 Access-Control 头没有设置正确
|
|
13
MungBeanSoup OP @chairuosen 能看到与不能看到的区别只是之前有没有一个 OPTIONS 请求,其他 Access-Control 头都是一样的 我倾向于 chrome 短时间内发现两个 url 相同的请求可能会有一些不可预测的行为
|
|
14
chairuosen 2017-02-17 09:52:24 +08:00
@MungBeanSoup 不不，那个 OPTIONS 是正常的探测，我们跟你一样。
你把 Access-Control 头只留一个 Allow-Origin:* 一个 Allow-Headers:Content-Type 试试。我一般只用这俩个，是没问题的，你看一下你只用这俩有没有问题。 另外一个问题， Chrome 里 JS 代码能收到数据么？只是 devtool 显示问题？ |
|
15
MungBeanSoup OP @chairuosen 只留了这两个头依然有这样的清空.
JS 是可以收到数据的,所以我觉得可能是 Chrome 自身的原因,这个 BUG 不影响开发只影响开发效率. |
|
16
MungBeanSoup OP @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 配置有什么问题了么.... |
|
17
chairuosen 2017-02-17 15:47:53 +08:00
@MungBeanSoup 。。。看来是 Chrome 的问题，看一下 Chrome 版本的区别？
|
|
18
MungBeanSoup OP @chairuosen 一语惊醒梦中人啊!能看到的都是 55 的 看不到的都是 56 的
|
|
19
chairuosen 2017-02-17 17:22:51 +08:00
@MungBeanSoup 很有可能是编码问题， 56 开始不自动适应编码了
|
|
20
chairuosen 2017-02-17 17:24:48 +08:00
@chairuosen 收回这句话，这仅仅是从 56 猜到的，可能性不打，因为你没 OPTIONS 是正常的。
|
 |
21
front10 2017-04-05 19:49:46 +08:00
mac 版 chrome v56 是有这个问题，升级到了 57 还是不行，试过 chromium56 也不行，无计可施了，有解决的请知会一声。目前是临时用 firefox 顶一下。
|
|
23
front10 2017-04-05 19:52:03 +08:00
接下来我会试下回退到 chrome 老版本
|
|
24
MungBeanSoup OP @front10 你可以尝试 Access-Control-Max-Age 这个头来缓存 OPTIONS 请求,这样只有没缓存的时候才有这个问题,目前我是用这个方法继续开发的.
|
 |
25
nibo 2017-05-10 15:24:34 +08:00
也遇到这个问题了和其他同事的 Chrome 版本对比过确实升级到新的版本是有这个现象，原来老的具体是哪个版本了不太清楚了但那个是可以的。
|
|
26
nibo 2017-05-10 15:39:15 +08:00
@MungBeanSoup 在 Stack Overflow 上找一个类似的问题看描述很象，准备找公司的前端同事尝试下。
http://stackoverflow.com/questions/42172505/chrome-no-response-data-after-options-request 问题作者提供的一个测试地址： https://jsfiddle.net/tpnucv5m/ 我试了下，如果是原生的 JavaScript 确实有数据返回。但 Vue Resource 确实没得数据现象和我遇到的一样。 |
|
27
nibo 2017-05-10 16:18:26 +08:00
刚才看了下 vue-resource 的 GitHub 仓库应该在新版本已经解决了
https://github.com/pagekit/vue-resource/releases/tag/1.3.0 |
|
28
nibo 2017-05-10 16:39:55 +08:00 1
@MungBeanSoup 测试了下，确实应该是 vue-resource 引起的，把版本升到 1.3.1 就正常了。
|
|
29
MungBeanSoup OP @nibo 非常感谢~
|
Select Language