gpt4 book ai didi

javascript - ReactJS 无法加载 src 中的文件

转载 作者:行者123 更新时间:2023-11-29 15:14:20 25 4
gpt4 key购买 nike

我在名为 index.html 的文件中有以下代码:

<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.js"></script>
<script src="src/Test2.js" type="text/babel"></script>
</head>

<body>
<div id="asdf"></div>
<script type="text/babel">

class Test extends React.Component {
render() {
return (<h>asdf</h>);
}
}

ReactDOM.render(
<Test/>,
document.getElementById('asdf')
);

</script>
</body>

我正在尝试使用我放入名为 Text2.js 的文件中的代码,该文件位于名为 src 的文件夹中,但是当我在 chrome 中运行上述代码时出现以下错误:

browser.js:5773 Failed to load file:///Users/.../src/Test2.js: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

我该如何解决这个问题?谢谢

PS:这是我的文件夹结构:

../reactTutorial  
../reactTutorial/index.html
../reactTutorial/src
../reactTutorial/src/Test2.js

如果这是相关的,我在 mac 上,这里也是 Text2.js 中的代码:

var Test2 = React.createClass({
render: function() {
return <div>This is Test2</div>;
}
});

最佳答案

创建一个 http 服务器将解决这个问题。

定义运行 http 服务器的 server.js

const express = require('express')
const app = express();
const path = require('path');

app.use(express.static('./src')) //assuming src folder will hold all assets.
app.get('/', (req, res) => res.sendFile(path.join(__dirname) + '/index.html'))
app.listen(3000, () => console.log('app listening on port 3000!'))

index.html

添加相对路径到 JS.exclude src folder name.

<script src="Test2.js"></script>

注意:安装express.js

使用 node server.js 运行它

关于javascript - ReactJS 无法加载 src 中的文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50791424/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com