調(diào)用本地服務(wù)報跨域錯誤

CORS

混合內(nèi)容

Mixed Content: The page at 'https://example.com' was loaded over HTTPS,but requested an insecure stylesheet 'http://example.com/static/css/example.css'. This request has been blocked; the content must be served over HTTPS.

更改瀏覽器配置，對混合內(nèi)容不進行限制
Use HTTP instead of HTTPs
請求響應(yīng)中插入響應(yīng)頭信息： “Content-Security-Policy: upgrade-insecure-requests”
在網(wǎng)頁 head 中添加標簽

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />

window.open打開新的網(wǎng)頁奶赠，使用document.write鱼填，通過表單的方式提交，如下：

    const url = `${org}?userId=${userId}`;
    const formStr = `<form id="loginPost"style="visibility:hidden;" method="POST" action="${url}" accept-charset="UTF-8">
    <input type="hidden" name="userid" value="${userId}" /></form>`;
    const w = window.open();
    w.document.write(formStr);
    w.document.querySelector('form').submit();

預(yù)檢請求

1.場景：門戶下調(diào)用本地錄音驅(qū)動服務(wù)（POST方式)毅戈，發(fā)現(xiàn)調(diào)用失敗苹丸，查看報錯信息：如下：

preflight.png

2.分析：預(yù)檢請求時塑猖，瀏覽器自動攜帶了請求頭：

Access-Control-Request-Header:content-type

請求頭 Access-Control-Request-Headers 出現(xiàn)于 preflight request（預(yù)檢請求）中，用于通知服務(wù)器在真正的請求中會采用哪些請求頭谈跛。

根據(jù)提示：是后臺沒有返回Access-Control-Allow-Headers造成羊苟。

點擊查看：Access-Control-Allow-Headers

訪問本地資源

1.場景，門戶下調(diào)用本地驅(qū)動服務(wù),報錯如下：

Access to XMLHttpRequest at 'http://127.0.0.1:19002/audio=getstatus' from origin 'http://134.192.232.66:9600' has been blocked by CORS policy: The request client is not a secure context and the resource is in more-private address space `local`.

http 網(wǎng)站不受信任（需要https 并且證書被認可的那種）不能訪問本地資源
2.解決方案：

打開瀏覽器感憾，進入chrome://flags/頁面蜡励，搜索Block insecure private network requests。進行關(guān)閉
驅(qū)動服務(wù)后臺加上響應(yīng)頭：Access-Control-Allow-Private-Network:true

最后編輯于：2022.12.12 09:58:44

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者