提取已被 CORS 策略阻止：请求的资源上不存在 'Access-Control-Allow-Origin' header

Question

的 api 制作此网络应用程序

当我为 web 制作样板时，我在控制台中收到此错误

const ENPOINT_JER = `${BASE_URL}competition/2002/standings`;
const ENPOINT_BEL = `${BASE_URL}competition/2003/standings`;
const ENPOINT_ING = `${BASE_URL}competition/2021/standings`;
const ENPOINT_SPA = `${BASE_URL}competition/2014/standings`;
const ENPOINT_PER = `${BASE_URL}competition/2015/standings`;

const fetchAPI = (url) => {
  return fetch(url, {
    headers: {
      "X-Auth-Token": API_KEY,
    },
  })
    .then((res) => {
      if (res.status !== 200) {
        console.log(`Error: ${res.status}`);
        return Promise.reject(new Error(res.statusText));
      } else {
        return Promise.resolve(res);
      }
    })
    .then((res) => res.json())
    .catch((err) => {
      console.log(err);
    });
};

function getStandingJer() {
  if ("caches" in window) {
    caches.match(ENPOINT_JER).then(function (response) {
      if (response) {
        response.json().then(function (data) {
          console.log("Competition Data: " + data);
          showStanding(data);
        });
      }
    });
  }

  fetchAPI(ENPOINT_JER)
    .then((data) => {
      showStanding(data);
    })
    .catch((error) => {
      console.log(error);
    });
}

我已经制作了 API_KEY 变量

Answer 1

有一些浏览器插件可以在您的应用开发期间抑制 cors： https://addons.mozilla.org/en-US/firefox/addon/cors-everywhere/

如果您使用的是 node 和 express，可以使用 cors 中间件包来提供帮助，但设置仍然很棘手。首先使用 npm install cors;

从命令行导入模块

then in your server.js file:
const   express =   require('express')
const   app =   express();

然后在回调之前将 cors() 作为参数添加到端点。这个人的 book

中有更多信息

提取已被 CORS 策略阻止：请求的资源上不存在 'Access-Control-Allow-Origin' header

fetch has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource

javascript

api

single-page-application

progressive-web-apps