Question

使用ReactJS教程我用

编写了一个本地服务器

>npm install -g http-server

>http-server -c-1

让http://localhost:8080

的本地服务器工作正常

但是，当我尝试在我的某个组件中使用AJAX调用时，我的chrome控制台中出现以下错误：

  XMLHttpRequest cannot load http://localhost:8080/comment.json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. The response had HTTP status code 405.

这是ajax调用片段：

var CommentBox = React.createClass({
                    loadCommentsFromServer: function(){
                        $.ajax({
                            url: this.props.url,
                            dataType: 'json',
                            cashe: false,
                            crossDomain:true,
                            headers: {'Access-Control-Allow-Origin': '*'},
                            success: function(data){
                                this.setState({data: data});
                            }.bind(this),
                            error: function(xhr, status, err){
                                console.error(this.props.url, status, err.toString());
                            }.bind(this)
                        });
                    },

this.props.url来自这里：

React.render(<CommentBox url="http://localhost:8080/comment.json" pollInterval={2000} />, document.getElementById('content'));

Answer 1

标头'Access-Control-Allow-Origin': '*'需要在服务器上响应AJAX请求（而不是客户端请求）。以下是使用http：

在vanilla NodeJS上执行此操作的示例

var http = require('http');

var server = http.createServer(function(request, response) {
  response.writeHead(200, {
    'Access-Control-Allow-Origin': '*',
    'Content-Type': 'application/json'
  });
  response.end('hi');
}).listen(8080);

对于http-server，您可以使用--cors选项运行它。

ReactJS localhost Ajax调用：No＆＃39; Access-Control-Allow-Origin＆＃39;头

1 个答案: