角度：請求的資源上不存在“Access-Control-Allow-Origin”標頭

Question

我能夠通過一些本地臨時修復來傳遞這個錯誤。 但是現在，我正在將應用程序移至網絡。 試圖找出這個 CORS 錯誤兩天。 在我的 VDS 上，我有 xxxx:4200 和 xxxx:3000 作為 angular 和 nodejs/express 設置。 兩者都可以在互聯網上訪問。

我嘗試過的：

• 在客戶端和服務器上設置 CORS 相關標頭。
• 設置app.use(cors());

也許我的嘗試是錯誤的，因此您可以提出相同的建議並進行一些澄清。

在客戶端獲取請求：

apiUrl = 'http://46.245.165.120:3000/';
this.http.get(this.apiUrl + `users/${type}`, { headers: { 'Authorization': `Bearer ${this.getToken()}` ,
          'Access-Control-Allow-Origin':'*',
          'Access-Control-Allow-Methods': 'GET, POST, PATCH, PUT, DELETE, OPTIONS',
          'Access-Control-Allow-Headers': 'Origin, Content-Type, X-Auth-Token'
        }});

服務器端標頭和 CORS 設置：

var originsWhitelist = [
    'http://localhost:4200',      //this is my front-end url for development
    'http://x.x.x.x:4200',
    'http://www.myproductionurl.com'
];
var corsOptions = {
    origin: function (origin, callback) {
        var isWhitelisted = originsWhitelist.indexOf(origin) !== -1;
        callback(null, isWhitelisted);
    },
    credentials: true
};
app.use(cors(corsOptions));

const allowCrossDomain = function (req, res, next) {

    var origin = req.headers.origin;

    if (originsWhitelist.indexOf(origin) > -1) {
        res.header('Access-Control-Allow-Origin', origin);
    }

    res.header('Access-Control-Allow-Methods', 'OPTIONS, GET, POST'); // added OPTIONS as an allowed method
    res.header('Access-Control-Allow-Headers', 'X-Requested-With,content-type,x-access-token');
    res.header('access-control-allow-credentials', true);

    return next();
}

app.use(allowCrossDomain)

Answer 1

您可以簡單地在后端（節點/快遞）使用此代碼：

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

app.use(cors({
  origin: [
    'http://localhost:4200',         //this is my front-end url for development
    'http://x.x.x.x:4200',
    'http://www.myproductionurl.com'
  ]
}))

app.get('/my-api-endpoint', function (req, res, next) {
  res.json({message: 'This API endpoint is CORS enabled.'})
})

app.listen(3000, function () {
  console.log('CORS-enabled web server listening on port 3000')
})

在您的前端（Angular）：

this.http.get(`${this.apiUrl}/users/${type}`, { 
  headers: { 
    'Authorization': `Bearer ${this.getToken()}`
  }
);

有關如何將 CORS與node和express一起使用的更多詳細信息。

Answer 2

我從這里向我的 rest api 發出請求，請求能夠返回 200 個響應，所以我意識到問題出在我的 angular 應用程序上。 我所有的問題都是 apiUrl 是本地主機。 我正在向localhost:3000而不是xxxx:3000發出請求。 有點疏忽，但浪費了大量時間，所以我想回答自己的問題。