XMLHttpRequest无法加载http:// *********。 No' Access-Control-Allow-Origin'标头出现在请求的资源上

时间:2016-06-09 17:42:20

标签: javascript html node.js express xmlhttprequest

我是节点,javascript的新手,但是当我尝试使用XMLHttpRequest进行get时,我遇到了一个没有Access-control-allow-origin的错误。我到处寻找解决方案,但似乎没有任何工作。

任何建议都会很棒。我很欣赏我真正希望能够在节点,javascript和html中获得更好的一切,所以如果你注意到我不应该做的事情,请告诉我。我还有一些重要的东西只是为了私密。

错误

 XMLHttpRequest cannot load http://*************. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://************' is therefore not allowed access.

我的server.js的主要部分

var express = require('express');
var path = require('path');
var server = express();
var http = require('http');
var fs = require('fs');
var formidable = require("formidable");
var XMLHttpRequest = require("xmlhttprequest").XMLHttpRequest;
var xhr = new XMLHttpRequest();
var request = require("request");

var port = process.env.port || 63342;

// Define ./public as static
server.use(express.static(path.join(__dirname, 'public')));

//
// as you can see Ive added this to try to fix the problem
//
server.use(function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    next();
});

//All POST's use processFormFieldsIndividual
server.post('*', processFormFieldsIndividual);

server.listen(port, function () {
    console.log('listening on port ' + port);
});

test.js

function addTable() {


    var uri = '***************';
    var r = new XMLHttpRequest();
    r.open("GET", uri, true);
    console.log(r.toString());
    r.onreadystatechange = function () {
        if (r.readyState == 4 && (r.status == 201 || r.status == 200)) 
        {
            var json = JSON.parse(r.responseText);
            // use json to make table in html logic

        }
        else
        {
           console.log("food");
        }

    };
    r.send();
}

的index.html

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<script src="js/test.js"></script>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="">

<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">


<!-- Custom styles for this template -->
<link href="css/jumbotron.css" rel="stylesheet">


<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <img src="images/taskbar.png" alt="navbar-header" border="0">
    </div>
    <div id="navbar" class="navbar-collapse collapse"> </div><!--/.navbar-collapse -->
      <br>
  </div>
</nav>
<br>
<d

iv class=container2>
        <form role="form" action="" method="post" enctype="multipart/form-data">              <fieldset>
                /*
                 * my form logic goes here
                */
        </fieldset>
    </form>


    <div id="metric_results">
        <input type="button" id="create" value="Click here" onclick="Javascript:addTable()">
    </div>

</div>


<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="js/bootstrap.min.js"></script>

</body>
</html>

2 个答案:

答案 0 :(得分:0)

您好,您也需要添加它。

res.header('Access-Control-Allow-Methods','GET,PUT,POST,DELETE,OPTIONS');

答案 1 :(得分:0)

  

在错误代码框中,第一个http:// ************是我试图从

好的,您所查询的服务器不是您显示代码的服务器。

该服务器(iquana服务器)必须设置这些响应标头。您无法在 服务器代码或客户端代码中设置任何内容,以便为他们的服务器启用CORS。这些标题必须从您正在进行跨源调用的服务器发送回