为了账号安全,请及时绑定邮箱和手机立即绑定

CORS策略阻止ajax请求

CORS策略阻止ajax请求

PHP
ITMISS 2022-10-14 10:52:53
我有一些简单的代码试图发出 ajax 请求。我尝试使用 .txt 文件并发现 CORS 错误。然后我尝试使用带有 header("Access-Control-Allow-Origin: *"); 的 php 文件 因为我听说这是在任何浏览器上允许所有 ajax 调用的最简单方法。我浏览了许多 SO 帖子并到处搜索,似乎找不到解决方案。这是我的文件。我将包含 .txt 文件,但我已经明白为什么该文件不起作用。ajax-1.html<!DOCTYPE html><html><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 listenerdocument.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>示例.php<?php  header("Access-Control-Allow-Origin: *");  echo "Some Lorem ipsum text";?>样本.txtlorem ipsum这是 chrome 控制台显示的内容就绪状态:1ajax1.html:1 从源“null”访问“file:///Users/macbookuser/Desktop/traversy/ajax/sample.php”处的 XMLHttpRequest 已被 CORS 策略阻止:跨源请求仅支持协议方案:http,数据,铬,铬扩展,https。ajax1.html:46 请求错误 ajax1.html:56 GET file:///Users/macbookuser/Desktop/traversy/ajax/sample.php net::ERR_FAILED
查看完整描述

1 回答

?
慕工程0101907

TA贡献1887条经验 获得超5个赞

我认为这是一个相当不言自明的错误。跨源请求仅支持错误消息中引用的特定协议列表(url 开头的单词,在 :// 之前),并且您从不以以下之一开头的 url 请求文件允许的协议:file://不在列出的协议中;

这是怎么发生的?好吧,您的 html 中的 url 是相对的,并且因为您刚刚在 Web 浏览器中直接打开了 html 文件(在本地磁盘上),所以浏览器地址栏中的 url 显示“file://...”并且 Ajax 对相对 URL 的任何请求也将使用此协议,因此它使用的是文件协议而不是 http。跨源请求不能以这种方式运行。

将文件托管在 Web 服务器上,在浏览器中打开指向 html 文件的 http url,然后重试


查看完整回答
反对 回复 2022-10-14
  • 1 回答
  • 0 关注
  • 127 浏览

添加回答

举报

0/150
提交
取消
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号