ReactJS 本地主机 Ajax 调用：否 'Access-Control-Allow-Origin' header

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

header '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 本地主机 Ajax 调用：否 'Access-Control-Allow-Origin' header

ReactJS localhost Ajax call: No 'Access-Control-Allow-Origin' header

javascript

ajax

localhost

node.js

reactjs