Question

我在名为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>;
    }
});

Answer 1

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

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

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名称的相对路径。

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

注意：安装express.js

使用 node server.js

运行它

Answer 2

Cross origin requests are only supported for protocol schemes

对于chrome，你必须托管服务器（你可以使用nodejs服务器或gulp插件）。尝试在firefox中打开它 - 应该没问题。

Answer 3

如果你这样做，那就更好了：首先：使其像反应组件示例App.js和Test.js 第二：从App.js导入Test.js

ReactJS无法在src中加载文件

3 个答案:

ReactJS无法在src中加载​​文件

3 个答案:

ReactJS无法在src中加载文件