js为什么不能在本地进行http请求

新手上路,请多包涵

当我在浏览器的控制台创建XMLHttpRequest对象进行GET请求时,产生strict-origin-when-cross-origin,但这个和网上大多出现这个的情况不大一样,通过chrome的network可以看出连stateCode都没有,所以是不能直接在本地环境下进行网络访问吗🤔
那浏览器的为什么可以进行请求资源访问呢,node或者其他通过server运行起来的js也是没问题的

感觉这一块想不大通

愿有好心人指点一二不胜感激🙏

阅读 3.1k
4 个回答

这应该是跨域问题

URL                                      说明                    是否允许通信
http://www.domain.com/a.js
http://www.domain.com/b.js         同一域名,不同文件或路径           允许
http://www.domain.com/lab/c.js

http://www.domain.com:8000/a.js
http://www.domain.com/b.js         同一域名,不同端口                不允许
 
http://www.domain.com/a.js
https://www.domain.com/b.js        同一域名,不同协议                不允许
 
http://www.domain.com/a.js
http://192.168.4.12/b.js           域名和域名对应相同ip              不允许
 
http://www.domain.com/a.js
http://x.domain.com/b.js           主域相同,子域不同                不允许
http://domain.com/c.js
 
http://www.domain1.com/a.js
http://www.domain2.com/b.js        不同域名                         不允许

具体如何解决跨域问题这篇文章说明的很详细 详情看这里

当时用 XMLHttpRequest 请求资源时,默认会使用同源策略,约束不同源之间的交行行为。
strict-origin-when-cross-origin是新版本 Chrome(>85) 中默认的同源策略。

打个比方,A(当前网页)需要去某个地方 C(服务器)拿个东西,但 A 没有亲自去拿,而是委托一个中间方 B(浏览器)去拿。这个 B 呢比较负责任,为了安全考虑,默认会检查 A 和 C 的关系。如果 A 是来自 C(比如 C 是 A 的家)的,那就会帮 A 去拿,而如果 A 想要 B 帮忙拿其他地方的东西(比如去隔壁小卖部拿冰棒),那他就不帮 A 拿。

这个策略下浏览器检查到不同源的请求时,都不用去访问服务器,直接就拒绝掉,所以连个 Status Code 都没有的。

如果想要绕过这个检查,一个简单的办法就是使用fetch(url,{mode:'no-cors'}),这样就可以绕过检查,去请求跨域的资源了。

也有其他方案可以绕过这个检查,你可以查看 @robin 给出的链接,或者搜索跨域、CORS 等关键词,根据不同的场景选用合适的方案。

至于在 Node 中请求,就相当于是 A 亲自去拿,所以就不会有跨域的问题了。


可以直接使用fetch(浏览器原生提供的对象),fetch(url, options), 有一个配置项'mode'可以指定是否跨域请求。
可以参考这篇文章
fetch api

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏