Question

我正在尝试在Chrome新标签扩展程序中使用W3C的CSS Validator Web Service 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
});

不幸的是承诺失败了，我得到了一条消息：

无法加载。没有'Access-Control-Allow-Origin'标题请求的资源。因此不允许原点访问。

如果资源不允许GET，我该如何提出“简单”CORS请求？

谢谢！

Answer 1

2017-10-22更新： change for adding CORS support to the CSS Validator已合并并推送到生产阶段，因此以下内容现在可以正常运行：

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 Validator只是不发送必要的CORS响应头。要解决这个问题，我raised a pull request with a change against the CSS Validator sources会让您的代码段按原样运行。一旦更改合并并推送到生产，我将在此处发布更新。

与此同时，您可以通过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代理来解决的答案中的“No Access-Control-Allow-Origin标题”问题部分No 'Access-Control-Allow-Origin' header is present on the requested resource—when trying to get data from a REST API

Answer 2

您需要register the allowed origin获取扩展程序的清单：

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

您可能还需要set the origin mode来获取fetch函数：

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 3

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

从here，您可以将过滤器添加到Chrome浏览器中。

如果资源不允许CORS，如何进行“简单”GET请求？

3 个答案: