使用js fetch禁用CORS

Question

我已经研究过了，我的语法看起来是正确的，但我无法弄清楚出了什么问题。

如果我不包括fetch options参数，一切正常工作，除了CORS被打开了，这就是我不想要的。

在请求中添加options和mode: 'no-cors'后，现在我在所有请求的图像中都会收到这个错误：

image-cropper-modal.js：73 GET数据：net :: ERR_INVALID_URL

我已经尝试查看MDN 的使用 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) 
});

- Anchalee

---

你有服务器端的访问权限吗？ 在开发模式下，我通常会添加以下内容以避免CORS：response.header("Access-Control-Allow-Origin", "*"); response.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept"); - Emiliano Barboza

FYI - 在你提供的第二个链接中，关于 no-cors，它指出 当然，你无法读取响应内容，这就很明显地表明你的代码将无法读取响应（即使 cors 标头存在，我认为也是如此）。 - Jaromanda X

Answer 1

使用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代码），并对其进行重定向或缓存，但不能读取或修改。

- Frxstrem

---

有什么解决办法吗？ - Anchalee

@Anchalee，没有不涉及代理用户的方法；但是我在我的答案中链接了一些公共CORS代理。 - Frxstrem