blocked by cors policy about CORS-RFC1918,或者local

2021-11-03 14:35:17

报错信息 has been blocked by CORS policy: The request client is not a secure context

the resource is in more-private address space `private`

之前用的好好的,突然就出错了。

我一猜就是google浏览器升级引起的问题,加深了安全机制。

但是我不知道怎么操作。

浪费了半天,终于找到解决办法了。

一开始的时间事再解决替换的js在chrome控制台监控网络的时候提示 

Failed to load response data: No content available beacase thie request was redirected

一直在上面费工夫解决问题了

其实操作正确与否,都会是这样的提示,记得看console里面的报错。解决了问题。


参考连接 blocked by cors policy about CORS-RFC1918

参考地址2 https://wicg.github.io/private-network-access/



問題描述

has been blocked by cors policy 

the request client is not a secure context 

and resource is in more-private address space private

1

2

3

解決方案

升級服務器端

Update 2021: A few months after I posted this question, 

the flag I referenced in my original answer was removed, 

and instead of disabling a security feature 

I was forced to solve the problem more satisfactorily.


Private Network Access (formerly CORS-RFC1918) is 

a specification that forbids requests 

from less private network resources to more private network resources. 

Like HTTP to HTTPS, or a remote host to localhost.


The ultimate solution was to add a self-signed certificate, 

and Access-Control-* headers, 

which enabled requests from my remote dev server 

to my localhost webpack-dev-server for assets.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

conf.https = {

  key: readFileSync('./.ssl/cert.key'),

  cert: readFileSync('./.ssl/cert.crt'),

  cacert: readFileSync('./.ssl/ca.crt'),

}


conf.headers = {

  'Access-Control-Allow-Private-Network': true,

  'Access-Control-Allow-Origin': '*',

}

1

2

3

4

5

6

7

8

9

10

屏蔽客戶端設置

chrome://flags/#block-insecure-private-network-requests



CORS-RFC1918

Private Network Access (formerly known as CORS-RFC1918) 

restricts the ability of websites to send requests to servers on private networks. 

It allows such requests only from secure contexts. 

The specification also extends the Cross-Origin Resource Sharing (CORS) protocol 

so that websites now have to explicitly request a grant from servers on private networks 

before being allowed to send arbitrary requests.

1

2

3

4

5

6



其它的解決方案

Private Network Access 【https://wicg.github.io/private-network-access/】,通過在MegaCorp 設置上做代理和控制。僅供參考,沒有驗證,希望有能力的同行來補充。


[^1] Chrome CORS error on request to localhost dev server from remote site

[^2] Chrome 安全策略 - 私有網絡控制(CORS-RFC1918)

[^3] Private Network Access update: Introducing a deprecation trial

————————————————

版权声明:本文为CSDN博主「MyFreeIT」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。

原文链接:https://blog.csdn.net/MyFreeIT/article/details/120437772


  • 2019-12-03 15:50:00

    html5 audio stop功能

    html5并没有提供停止功能,我们需要通过其他方式来实现这个问题,下面我们来看下神仙般的操作。

  • 2019-12-03 16:33:49

    hapi,nuxtjs跨域请求

    简单请求 与 预检请求,Fetch 与 CORS 的一个有趣的特性是,可以基于 HTTP cookies 和 HTTP 认证信息发送身份凭证。一般而言,对于跨域 XMLHttpRequest 或 Fetch 请求,浏览器不会发送身份凭证信息。如果要发送凭证信息,需要设置 XMLHttpRequest 的某个特殊标志位。

  • 2019-12-03 16:36:03

    跨域资源共享 CORS 详解

    阮一峰大哥的文章写的不错,推荐,也推荐他的整个王章,大家可以去看一下啊。

  • 2019-12-03 16:37:01

    去除options,减少options的访问

    因为跨域请求,浏览器可能(后面讲)会发送一次options请求,如果处理不好,跨域还是会gg的。 之前很少涉及跨域,涉及也是简单请求(下面阮老师文章中区别热简单请求和复杂请求),所以基本不会很少关注options。后面就遇到坑了,下面讲讲注意点。

  • 2019-12-04 10:46:26

    nuxt.js项目中全局捕获异常并生成错误日志全过程

     需求:客户在使用过程中页面报错时,可以生成错误记录传回服务器,以便改进。   步骤:     一.全局捕获异常,     二.发送到服务端,     三.生成错误日志。   一.全局捕获异常 如图,vue提供了errorHandle这个方法来处理全局异常,更多详细内容参见官网。