调用本地服务报跨域错误

CORS

混合内容

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.

更改浏览器配置，对混合内容不进行限制
Use HTTP instead of HTTPs
请求响应中插入响应头信息： “Content-Security-Policy: upgrade-insecure-requests”
在网页 head 中添加标签

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

window.open打开新的网页，使用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();

预检请求

1.场景：门户下调用本地录音驱动服务（POST方式)，发现调用失败，查看报错信息：如下：

preflight.png

2.分析：预检请求时，浏览器自动携带了请求头：

Access-Control-Request-Header:content-type

请求头 Access-Control-Request-Headers 出现于 preflight request（预检请求）中，用于通知服务器在真正的请求中会采用哪些请求头。

根据提示：是后台没有返回Access-Control-Allow-Headers造成。

点击查看：Access-Control-Allow-Headers

访问本地资源

1.场景，门户下调用本地驱动服务,报错如下：

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 网站不受信任（需要https 并且证书被认可的那种）不能访问本地资源
2.解决方案：

打开浏览器，进入chrome://flags/页面，搜索Block insecure private network requests。进行关闭
驱动服务后台加上响应头：Access-Control-Allow-Private-Network:true