错误:请求的资源上没有“Access-Control-Allow-Origin”标头。使用expressjs和angular

时间:2016-03-25 09:46:45

标签: angularjs express heroku server

我想很多人都给出了解决方案,但是没有人为我工作

请检查我的代码并告诉我哪里出错了...

我部署在heroku中仍然看到同样的问题

Angular JS片段:

$http({
        method: 'GET',
        url: "https://api.forecast.io/forecast/2c56930e3e0117b9943b9f618acfe981/17.3434321,78.536526",
        headers: {
           'Content-Type': 'application/json',
           'Access-Control-Allow-Origin': '*'
       }
       }).
       success(function(status) {
                        $scope.weather = status.data;
       }).
       error(function(status) {
                        console.log("failure");
                    });

Expressjs(服务器)代码段:

var express = require('express'),
  http = require('http');
var bodyParser = require('body-parser');
var jsonfile = require('jsonfile');
var path = require('path');
var cors = require('cors');


var allowCrossDomain = function(req, res, next) {
    res.header('Access-Control-Allow-Origin', 'api.openweathermap.org');
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
    res.header('Access-Control-Allow-Headers', 'Content-Type');

    next();
}

var app = express()
  .use(bodyParser.urlencoded({
    extended: true
  }))
  .use(bodyParser.json())
  .use(express.static(__dirname + '/public'))
  .use(cors())
  .use(allowCrossDomain)
  .use('/node_modules', express.static(__dirname + '/node_modules'))
  .use('/bower_components', express.static(__dirname + '/bower_components'));

app.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();
});
app.all('*', function(req, res, next) {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS');
  res.header('Access-Control-Allow-Headers', 'Content-Type');
  next();
});

app.all('/', function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "X-Requested-With");
  next();
});

1 个答案:

答案 0 :(得分:0)

您不需要“Access-Control-Allow-Origin”设置。

问题是,你正在抓住客户端的网址。

只需使用nodejs(可能使用express)创建一条路径,即可从外部服务器获取数据。

您可以通过nodejs路由获取数据,以便在客户端(angularjs)显示/使用它。

更新

服务器端:

var express     = require('express'),
http            = require('http');
var bodyParser  = require('body-parser');
var app         = express();
var request     = require('request');

app

// express json parser
.use(bodyParser.urlencoded({
    extended: true
}))
.use(bodyParser.json())

// public foder for client side
.use(express.static(__dirname + '/public'))

// express route to get the forecast data/json
.get('/forecast', function(req, res) {

    request({
        url: "https://api.forecast.io/forecast/2c56930e3e0117b9943b9f618acfe981/17.3434321,78.536526"
    }, function (error, response, body) {
        res.send(response.body);
    });

})

// server port
.listen(8080);

在Clients上,您必须立即拨打当地路线的网址:

$http
.get("http://localhost:8080/forecast")
.success(function (data, status) {
    $scope.weather = data;
})
.error(function (data, status) {
    console.log("Request failed " + status);
})
.then(function() {
    console.log($scope.weather);
});