Question

我有一些简单的代码试图发出ajax请求。我尝试使用.txt文件，但发现CORS错误。然后，我尝试使用带有标头的php文件（“ Access-Control-Allow-Origin：*”）；因为我听说这是允许任何浏览器上所有ajax调用的最简单方法。我浏览了许多SO帖子，并在所有地方使用Google搜索，但似乎找不到解决方案。这是我的文件。我将包含.txt文件，但我已经理解了为什么该文件无法正常工作。

ajax-1.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Ajax 1 - Text File</title>
</head>

<body>
  <button id="button">Get Text File</button>
  <br><br>
  <div id="text">

  </div>

  <script>
    //create event listener
document.getElementById('button').addEventListener('click', loadText);

function loadText() {
  //create an object
  const xhr = new XMLHttpRequest();
  //open - type, url/file, async t/f
  xhr.open('get', 'sample.php', true);

  console.log('READYSTATE: ', xhr.readyState);

  //OPTIONAL - used for loaders
  xhr.onprogress = function () {
    console.log('READYSTATE: ', xhr.readyState);
  }

  xhr.onload = function () {
    console.log('READYSTATE: ', xhr.readyState);
    if (xhr.status == 200) {
      // console.log(this.responseText);
      document.getElementById('text').innerHTML = this.responseText;
    } else {
      document.getElementById('text').innerHTML = 'Not Found';
    }
  }

  xhr.onerror = function () {
    console.log('request error');
  }

  //sends request
  xhr.send();
    }
  </script>
</body>

</html>

sample.php

<?php
  header("Access-Control-Allow-Origin: *");

  echo "Some Lorem ipsum text";
?>

sample.txt

lorem ipsum

这是Chrome控制台显示的内容

READYSTATE：1

ajax1.html：1在以下位置访问XMLHttpRequest 来自的'file：///Users/macbookuser/Desktop/traversy/ajax/sample.php' 原点“ null”已被CORS政策阻止：跨原点请求仅支持协议方案：http，data，chrome， chrome-extension，https。 ajax1.html：46请求错误ajax1.html：56 GET 文件：///Users/macbookuser/Desktop/traversy/ajax/sample.php 净:: ERR_FAILED

Answer 1

我认为这是一个很容易解释的错误。跨源请求仅支持错误消息中引用的特定协议列表（URL开头的单词，在：//之前的单词），并且您要从不以以下任何一个开头的url请求文件允许的协议：file：//不在列出的协议中；

它是怎么发生的？嗯，您的html中的url是相对的，并且因为您刚刚在网络浏览器中直接打开了html文件（在本地磁盘上），所以浏览器地址栏中的url显示为“ file：// ...”并且Ajax对相对URL的任何请求也将使用此协议，因此它使用的是文件协议，而不是http。跨源请求不能以此方式运行。

将文件托管在网络服务器上，在浏览器中打开html文件的http网址，然后重试

CORS政策阻止了ajax请求

1 个答案: