在我开始这个问题之前，这是我已经知道的，以避免沿着相同的路线回答。
TL;DR：我已经知道我可以使用网络服务器并将 index.html 提供为http://localhost:8081/index.html并且它会工作。
现在是问题的详细信息：
我创建了一个最小的 react-js 应用程序，在 index.html 文件中引用 babel-standalone 如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Minimal</title>
</head>
<body>
<div id='divRootComponent'></div>
<!-- react reasonably latest for oct/2018 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.4.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.2/umd/react-dom.production.min.js"></script>
<!-- babel -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
<!-- react CUSTOM component.. i.e. myApp's entry point -->
<script type="text/babel" src="index.js"></script>
</body>
</html>
和 index.js 内容是：
class YoSupComponent extends React.Component {
constructor () {
super();
this.state = {
message: 'whatever...'
};
}
componentDidMount() {
console.log('YoSupComponent.componentDidMount');
}
render () {
return (
<div>
Yo ! Dude or Dudette... sup ?
</div>
);
}
}
const props = {}; //none for now...
ReactDOM.render(<YoSupComponent {...props} />
, document.getElementById('divRootComponent'))
当我尝试通过 file:///path/to/index.html 访问浏览器中的 index.html 文件时，错误是：
CORS 策略已阻止从源“null”访问“file:///D:/path/to/index.js”处的 XMLHttpRequest：跨源请求仅支持以下协议方案：http、data、chrome、chrome - 扩展，https。@ babel.min.js:24
所以想到是远程引用文件的script标签的问题，我在本地下载react和babel，并在本地进行引用；然后我再次访问 file:///path/to/index.html。
仍然得到同样的错误！这是怎么回事？a) 当 babel.js 文件现在是本地的时，为什么 babel 甚至使用 XMLHttpRequest（根据错误消息）？b) 为什么反应文件没有这样的消息？
Joe*_*lay 18
根据MDN，如果您指定类型不是 的脚本标记，text/javascript浏览器将忽略它：
嵌入的内容被视为浏览器不会处理的数据块。开发人员必须使用非 JavaScript MIME 类型的有效 MIME 类型来表示数据块。src 属性将被忽略。
换句话说，浏览器不会index.js在您的示例中加载或运行。这是有道理的 - 如果这样做，您会收到语法错误，因为您的浏览器无法理解 JSX。
实际发生的是babel-standalone脚本查看您的 HTML，找到所有标记为 的脚本标签text/babel，通过 加载它们XMLHttpRequest，然后编译并运行它们。
这就是您收到 CORS 错误的原因 - 浏览器未加载文件，脚本加载了。不幸的是，如果不使用 Web 服务器或提前编译 Babel 代码，我认为您无法解决此问题。
| 归档时间： |
|
| 查看次数： |
2700 次 |
| 最近记录： |