如何解決「XMLHttpRequest 無法載入。對預檢請求的回應未通過存取控制檢查」錯誤？

存取控制被拒絕：Web 開發中的CORS 故障排除

問題：

使用ngResource 存取功能存取>問題：

XMLHttpRequest cannot load <url>. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '<origin>' is therefore not allowed access.

使用ngResource 存取功能存取Amazon Web Services，您遇到以下情況錯誤：

原因：

此問題源自於跨來源資源共享(CORS) 限制，該限制會阻止一個網域上的Web應用程式發出請求沒有明確的其他領域

解決方案：

解決CORS 問題的方法有多種：

1.禁用CORS：
• 在Chrome 中，訪問chrome://flags/#disable-web-security
• 將「停用網路安全」設定為「啟用」

注意：

此解決方案只能用於開發目的。

2.瀏覽器插件：

安裝停用 CORS 檢查的瀏覽器插件，例如 CORS Unblock。

3.代理伺服器：

使用代理伺服器，例如Nginx，處理跨域請求。這使瀏覽器相信請求來自本地主機。

4。伺服器配置：

配置您的伺服器以將 Access-Control-Allow-Origin 標頭新增至回應。請參閱啟用 CORS 網站，以了解基於您的伺服器的具體說明。

const makeRequest = (url, options) => {
  return new Promise((resolve, reject) => {
    const request = new XMLHttpRequest();
    request.open(options.method, url);
    request.setRequestHeader('Accept', 'application/json');

    request.onload = () => {
      if (request.status >= 200 && request.status < 300) {
        resolve(request.response);
      } else {
        reject({
          status: request.status,
          statusText: request.statusText
        });
      }
    };

    request.onerror = () => {
      reject({
        status: request.status,
        statusText: request.statusText
      });
    };

    request.send(options.body);
  });
};

5.有 Promise 的 HTTP 例：

以上是如何解決「XMLHttpRequest 無法載入。對預檢請求的回應未通過存取控制檢查」錯誤？的詳細內容。更多資訊請關注PHP中文網其他相關文章！