ANGULAR: На запрашиваемом ресурсе отсутствует заголовок «Access-Control-Allow-Origin»

Question

Я смог передать эту ошибку с некоторыми локальными временными исправлениями. Но сейчас я перемещаю приложение в сеть. Попытка выяснить эту ошибку CORS в течение двух дней. На моем VDS у меня есть xxxx: 4200 и xxxx: 3000 как angular и nodejs / express setup. Оба могут быть доступны на inte rnet.

То, что я пробовал:

• Установить связанные с 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

Я отправлял запросы на мои остальные API от здесь , запросы смогли вернуть 200 ответов, поэтому я понял, что проблема была в моем angular приложении. Вся моя проблема была в том, что apiUrl был локальным хостом. Я делал запросы к localhost:3000 не x.x.x.x:3000. Немного упущения, но огромная трата времени, поэтому я хотел ответить на свой вопрос.

Answer 2

Вы можете просто использовать этот код на своей внутренней стороне (узел / express):

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.