Javascript 我自己的JS文件的跨源请求错误，但不适用于外部库。为什么？_Javascript_Reactjs

Javascript 我自己的JS文件的跨源请求错误，但不适用于外部库。为什么？

javascript reactjs

Javascript 我自己的JS文件的跨源请求错误，但不适用于外部库。为什么？,javascript,reactjs,Javascript,Reactjs,所以我按照这个例子来尝试让React在我的计算机上工作我注意到我没有访问服务器的权限，也无法在这台计算机上安装任何东西，所以我尝试使用c:或file://路径获取一个显示的站点这是我的index.html代码。注意，我已将react、react dom和浏览器脚本保存在本地 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>React Hel

所以我按照这个例子来尝试让React在我的计算机上工作

我注意到我没有访问服务器的权限，也无法在这台计算机上安装任何东西，所以我尝试使用c:或file://路径获取一个显示的站点

这是我的index.html代码。注意，我已将react、react dom和浏览器脚本保存在本地

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>React Hello World</title>
  </head>
  <body>

    <div id='root'></div>
    <script src="extfiles/react.js"></script>
    <script src="extfiles/react-dom.js"></script>
    <script src="extfiles/browser.min.js"></script>
    <script src="extfiles/scripts.js" type="text/babel"></script>
  </body>
</html>


反应你好世界

我的scripts.js文件非常简单

ReactDOM.render(<h1>Hello World</h1>, document.getElementById('root'));

ReactDOM.render（helloworld，document.getElementById（'root'）；

我得到了这个错误

XMLHttpRequest cannot load file:///<path>/extfiles/scripts.js. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.transform.load @ browser.min.js:4

XMLHttpRequest无法加载file:////extfiles/scripts.js. 跨源请求仅支持协议方案：http、data、chrome、chrome extension、https、chrome-extension-resource.transform.load@browser.min.js:4

我理解为什么我会从以下帖子中得到这个错误

我不明白的是，为什么我在加载react库时没有遇到这个错误，而只是在加载自己的文件时。因为如果我改变

<script src="extfiles/scripts.js" type="text/babel"></script>

到


render（helloworld，document.getElementById（'root'）；

然后，这向我表明ReactDOM已经加载。

基于评论中给出的答案构建，因为这似乎是新React开发人员的常见问题

浏览器在尝试加载本地文件时生成的跨源请求错误存在，以防止将本地脚本注入网页和服务器信任这些脚本

因此，无法加载本地脚本；您需要通过HTTP或HTTPS为它们提供服务。一个简单的方法是使用本地web服务器，比如@AnthonyKong在评论中说的Python特性

此外，React还有一个开发者工具插件，它为您提供了允许本地脚本进行开发的选项。

…因此，我试图让一个站点仅使用c:或file://路径显示。

这是您的问题。内容必须通过http/HttpSy提供您只需通过

python-mSimpleHTTPServer

使用脚本标记加载脚本就可以启动web服务器，没有“交叉源”limitations@AnthonyKong：是的，我知道-但我想理解的是为什么我可以加载react库，但不能加载我自己的文件。“extfiles/scripts.js”是相对路径或URL。可能被翻译成类似的东西。而file:////extfiles/scripts.js，这是直接从磁盘读取文件，而不是从服务器读取文件，这就是它抱怨XSS的原因。

    <script type="text/babel">
    ReactDOM.render(<h1>Hello World</h1>, document.getElementById('root'));
</script>