No 'Access-Control-Allow-Origin' header is present on the requested resource. Как исправить ситуацию?

Question

[Alexey]

Использую в проекте Ionic, Socket.io. Бэкенд написан на node.js.
Пытаюсь с помощью клиента достучаться до сервера который расположен в облаке Cloud9.
Выдает ошибку:
XMLHttpRequest cannot load https:/URL. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '192.168.10.159:8100' is therefore not allowed access.

Как я понимаю, проблема в безопасности, в том что Chrome не дает доступ к внешнему ресурсу.
Пробовал:
1) "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files --disable-web-security
2) ionic project
"proxies": {
"path": "/chat",
"proxyUrl": "https://..."
}

3) Пробовал плагин отключающий/включающий CORS для Chrome.
Везде одинаково. Не помогает

Обращаюсь к серверу через сервис:

angular.module('starter')

.factory('Socket', function (socketFactory) {
  var url = 'https:...';  
  var myIoSocket = io.connect( url );

  mySocket = socketFactory({
    ioSocket: myIoSocket
  });

  return mySocket;
});

На сервере:

// Including Express.js
var express = require('express');
// Creating app Express
var app = express();

// Creating server using express and http
var server = require('http').createServer(app);

Как излечить данный недуг, поскольку далее идти не вариант...?

P.S. Изменил сервер

var express = require('express');
var app = express();
var http = require('http');
var server = http.createServer(app);

server.on('request', function(req, res) {
res.writeHead(200, {
'Content-Type': 'text/event-stream; charset=utf-8',
'Cache-Control': 'no-cache',
'Access-Control-Allow-Origin': '*'
});

res.end();
})

В данном случае имею другую ошибку: XMLHttpRequest cannot load https://URL. A wildcard '*' cannot be used in the 'Access-Control-Allow-Origin' header when the credentials flag is true. Origin '192.168.10.159:8100' is therefore not allowed access. The credentials mode of an XMLHttpRequest is controlled by the withCredentials attribute.

Как с этим быть?

Comments

[Dmitriy Uvarov]

Сделайте и клиент, и сервер на cloud9, что вам мешает поднять там сервер, отдать статику с вашим приложением и обращаться к этому же, или доп. серверу на этом же адресе?

[Alexey]

В данном случае, не мешает ничего, просто хочу решить вопрос, поскольку с данной проблемой 100% столкнусь и далее...

Answer 1

[Алексей Зуев]

Я недавно EventSource тестил и обращался к cloud9 через angular2. Была такая же проблема.
Решил установкой Access-Control-Allow-Origin на сервере через

res.writeHead(200, {
  'Access-Control-Allow-Origin': '*',
  // 'Access-Control-Allow-Credentials': true 
});

Еще вариант если используется express

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

app.use(cors());
// или
app.use(cors({
    origin: true,
    credentials: true
}));

Comments

[Alexey]

Алексей, сделал как вы сказали:

var express = require('express');
var app = express();
var http = require('http');
var server = http.createServer(app);

server.on('request', function(req, res) {
res.writeHead(200, {
'Content-Type': 'text/event-stream; charset=utf-8',
'Cache-Control': 'no-cache',
'Access-Control-Allow-Origin': '*'
});

res.end();
})

В данном случае имею другую ошибку: XMLHttpRequest cannot load https://URL. A wildcard '*' cannot be used in the 'Access-Control-Allow-Origin' header when the credentials flag is true. Origin '192.168.10.159:8100' is therefore not allowed access. The credentials mode of an XMLHttpRequest is controlled by the withCredentials attribute.

Как с этим быть?

[Алексей Зуев]

azovl: content-type для начала у вас не такой, может его вообще не надо устанавливать

[Alexey]

Логично, но это особо ситуацию не изменяет. Насколько я понял, вместо звездочки указать нужно конкретный домен, пробую сейчас... но пока-что результата нет.

[Алексей Зуев]

azovl: попробуй добавить Access-Control-Allow-Credentials: true

[Алексей Зуев]

azovl: всё понятно по заголовкам если открыть вкладку сеть в хроме

[Алексей Зуев]

azovl: суть в том, что надо смотреть на отправляемые заголовки, а потом на заголовки с сервера. Если в отправке есть заголовок к примеру X-Requested-With, то на сервере его надо разрешить через Access-Control-Allow-Headers

[Алексей Зуев]

azovl:

[Алексей Зуев]

azovl: какие заголовки в реквесте?

[Alexey]

Спасибо за скрин. У меня ответ раза в 3 меньше.

[Alexey]

Date:Tue, 03 May 2016 16:03:32 GMT
Location:https:...
Transfer-Encoding:chunked
X-BACKEND:apps-proxy

[Алексей Зуев]

azovl: с cloud9 у меня такой ответ

access-control-allow-origin:*
cache-control:no-cache
content-type:text/event-stream; charset=utf-8
date:Tue, 03 May 2016 16:08:55 GMT
transfer-encoding:chunked
X-BACKEND:apps-proxy
Request Headers
view source

Answer 2

[_ _]

1) ionic прокси должен работать
2) Chrome, запущенный с флагом должен работать (но его нужно запускать с нуля - если Chrome уже открыт, то он просто на передний план вылезет, без применения флага, само собой)

Answer 3

[Error 502]

Заставьте сервер выдавать в заголовке этот параметр. та же хрень была у меня.