如果资源不允许 CORS，如何发出 "simple" GET 请求？

Question

我正在尝试在 Chrome 新标签扩展中使用 W3C 的 CSS 验证程序 Web 服务 API。 The docs 声称请求是 对 URI 的简单 HTTP GET 调用，所以我认为这应该可行：

fetch('http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.w3.org%2F&profile=css3&output=json')
.then((response) => {
  // do stuff with response
});

不幸的是，承诺失败了，我收到如下消息：

Failed to load. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin is therefore not allowed access.

如果资源不允许 CORS，我该如何发出 "simple" GET 请求？

谢谢！

Answer 1

您需要 register the allowed origin 扩展的清单：

  "permissions": [
    "http://jigsaw.w3.org/"
  ],

您可能还需要 set the origin mode 获取功能：

fetch(
 'http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.w3.org%2F&profile=css3&output=json', 
  {mode: 'no-cors'})
.then((response) => {
  // do stuff with response
});

Answer 2

2017-10-22 更新： change for adding CORS support to the CSS Validator 已合并并推送到生产环境，因此以下内容现在有效 as-is：

const validatorURL = 'https://jigsaw.w3.org/css-validator/validator' +
  '?uri=http%3A%2F%2Fwww.w3.org%2F&profile=css3&output=json';
fetch(validatorURL)
  .then(response => response.json())
  .then(results => console.log(results))

原回答：

CSS 验证器未发送必要的 CORS 响应 header。为了解决这个问题，我 raised a pull request with a change against the CSS Validator sources 可以让您的代码片段正常工作 as-is。一旦更改被合并并推送到生产环境，我将 post 在这里更新。

同时，您可以通过 CORS 代理发出请求来解决此问题：

const proxyURL = 'https://cors-anywhere.herokuapp.com/';
const validatorURL = 'http://jigsaw.w3.org/css-validator/validator' +
  '?uri=http%3A%2F%2Fwww.w3.org%2F&profile=css3&output=json';
fetch(proxyURL + validatorURL)
  .then(response => response.json())
  .then(results => console.log(results))

有关其工作原理的详细信息，请参阅 如何使用 CORS 代理解决“无 Access-Control-Allow-Origin header”问题 部分在 No 'Access-Control-Allow-Origin' header is present on the requested resource—when trying to get data from a REST API.

回答

Answer 3

您可以从 chrome 网上商店添加 CORS 过滤器扩展。只需在运行您的代码之前启用过滤器。

从 here 您可以将过滤器添加到 chrome 浏览器。

如果资源不允许 CORS，如何发出 "simple" GET 请求？

How to make a "simple" GET request if the resource doesn't allow CORS?

css

cors

w3c

w3c-validation

fetch-api