錯誤：請求的資源上沒有“Access-Control-Allow-Origin”標頭。 使用expressjs和angular

Question

我想很多人都給了解決方案，但沒有一個能為我工作

請檢查我的代碼並告訴我哪里出錯了...

我部署在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();
});

Answer 1

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

問題是，您正在從客戶端獲取URL。

只需使用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);

在客戶端，您必須立即調用本地路由的網址：

$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);
});