我已经查看了它,我的语法看起来正确,但我无法弄清楚出了什么问题。如果我没有包含选项参数,一切正常,除了CORS打开,这是我不想要的。
在请求中添加模式选项后,我现在收到所有请求图像的错误:
image-cropper-modal.js:73获取数据:net :: ERR_INVALID_URL
已经尝试过这样看:https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch 在这里:https://jakearchibald.com/2015/thats-so-fetch/
这是我的代码:
const options = {
method: 'GET',
mode: 'no-cors'
};
fetch(url, options).then(response => response.blob())
.then(blob => {
let reader = new FileReader();
reader.onload = () => {
const type = blob.type;
const [image, dataUrl] = [new Image(), reader.result];
image.src = dataUrl;
const [width, height] = [image.width, image.height];
const {minWidth, minHeight} = props.opt;
const isWithinBounds = (width >= minWidth) && (height >= minHeight);
callback({
dataUrl,
height,
minHeight,
minWidth,
width
});
}
reader.readAsDataURL(blob)
});
答案 0 :(得分:5)
使用no-cors
选项,不会给您一个可读的回复:
no-cors
- 防止该方法不是HEAD
,GET
或POST
。如果任何ServiceWorkers拦截这些请求,他们可能不会添加或覆盖除这些之外的任何标头。 此外,JavaScript可能无法访问生成的响应的任何属性。这可确保ServiceWorkers不会影响Web的语义,并防止因跨域泄漏数据而导致的安全和隐私问题。 (source,强调我的)
换句话说,如果您想从JavaScript发出请求,则需要启用CORS。如果您不能自己在服务器上设置CORS支持,唯一的方法是通过服务器代理您的请求代表您发出非CORS请求(通过使用您自己的服务器,或使用第三方服务,例如crossorigin.me或cors-anywhere,或任何其他类似服务。)
对于上下文,no-cors
选项可用,因为在某些情况下您可能希望在不必读取响应的情况下发出非CORS请求。例如,service workers可以使用此选项拦截(例如,重定向或缓存,但不读取或修改)浏览器发出的请求(如<img>
标签或HTML页面,而不仅仅是JavaScript代码)。