Question

我正在尝试使用node express作为服务器的角度安静的Web服务。我正面临Access-Control-Allow-Origin。我的快递代码如下：

var express = require('express');
var app = express();

app.get('/getdata',function (req,res){
    console.log("serving request from here");
    res.header("Access-Control-Allow-Origin", "*");
    res.setHeader('Content-Type', 'application/json');
  res.send(JSON.stringify({ records: {name: 'raj', country: 'india'} }));
});
app.get('/postdata', function(req, res){
    console.log("requested value dddd");
    res.setHeader("Access-Control-Allow-Origin", "*");
    res.setHeader("Access-Control-Allow-Headers", "X-Requested-With");
    console.log("request value :::",req);
    res.send(JSON.stringify({status: 'Success1111'}));
});

var server = app.listen('4050',function(){
    console.log("server running");
    var host = 'localhost';
  var port = server.address().port;

  console.log('Example app listening at http://%s:%s', host, port);
});

我正在上面的代码中处理来自 / postdata 路线中的角应用的帖子请求。

我的角度示例代码

<script src="angular.js"></script><!-- load angular -->
<div ng-app="myApp" ng-controller="customersCtrl"> 
<ul>
    {{ values.name + ', ' + values.country }}
    {{ mystatus }}
</ul>
</div>
<script>
var app = angular.module('myApp', []);
var url = "http://localhost:4050";
app.controller('customersCtrl', function($scope, $http) {
// Simple GET request example:
$http({
  method: 'GET',
  url: url+'/getdata'
}).then(function successCallback(response) {
    console.log("myres ::",response);
    $scope.values = response.data.records;
  }, function errorCallback(response) {
  });

// $http.defaults.headers.post = {
//         'Access-Control-Allow-Origin': '*',
//         'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
//         'Access-Control-Allow-Headers': 'Content-Type, X-Requested-With'
//         };
//         $http.defaults.useXDomain = true;
    $http({
  method: 'POST',
  url: url+'/postdata',
 data: { test: 'test' }
}).then(function successCallback(response) {
    console.log("response from heree",response);
    $scope.mystatus = response.data.records;
  }, function errorCallback(response) {
    console.log("error");
  });
});
</script>

在页面加载时我发起请求，Getdata请求正常工作，但对于postdata请求，它显示控制台中显示以下错误。

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

但是当我从控制台错误中打开新选项卡中的URL时，它会显示正确的响应。我在这里面临一个困难，为什么请求显示错误。任何人都可以帮忙。提前致谢

Answer 1

由于您的POSTed数据内容类型为＆＃39; application / json ＆＃39;，浏览器将执行飞行前OPTIONS请求。因此，您需要在OPTIONS调用响应中使用适当的Access-Control标头进行响应。

我已经能够通过添加选项方法来解决错误。此外，我更正为 app.post （＆＃39; / postdata＆＃39;，...）

app.options('/postdata', function(req, res){
  res.setHeader("Access-Control-Allow-Origin", "*");
  res.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  res.send(200);
});

app.post('/postdata', function(req, res){
    console.log("requested value dddd");
    res.setHeader("Access-Control-Allow-Origin", "*");
    res.setHeader("Access-Control-Allow-Headers", "X-Requested-With");
    console.log("request value :::",req);
    res.send(JSON.stringify({status: 'Success1111'}));
});

如果您没有明确定义选项方法，那么表达式框架只需在没有访问控制头的情况下响应200OK。我不是node.js专家，所以可以有更好的方法来编写代码。

在这个SO post中，他们讨论了如何将其作为中间件来处理。

您还可以使用 cors 包 - https://www.npmjs.com/package/cors

Angular $ http发布请求丢弃访问控制来源错误

1 个答案: