Получение «было заблокировано политикой CORS» при попытке загрузить файл

Я пытался установить пользовательский интерфейс для загрузки файла excel с помощью angular8. Фронтальные и серверные (nodejs) приложения работают на двух разных портах. При нажатии кнопки загрузки я получаю ошибки.

Пробовали добавить этот код:

app.use(cors());
app.use(function (req, res, next) {
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
  res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');
  res.setHeader('Access-Control-Allow-Credentials', true);

  next();
});

все та же ошибка

машинопись:

url_='http://localhost:3000/product/upload-exel'
    public uploader :FileUploader = new FileUploader({
      url:this.url_
    });

HTML:

<input type="file"  id="file"
ng2FileSelect [uploader]="uploader"
[(ngModel)]="path">

ВАРИАНТЫ http://localhost:3000/product/upload-exel 404 (не найдено) Доступ в XMLHttpRequest по адресу 'http://localhost:3000/product/upload-exel' из источника 'http://localhost:4000' заблокирован политикой CORS: ответ на предварительный запрос не проходит контроль доступа проверить: значение заголовка «Access-Control-Allow-Origin» в ответе не должно быть подстановочным знаком «*», когда режим учетных данных запроса «включить». Режим учетных данных запросов, инициированных XMLHttpRequest, управляется атрибутом withCredentials.


node.js angular angular8
person Amal Raj P    schedule 17.07.2019    source источник
comment
ошибка говорит The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'.. поэтому вы можете попробовать удалить * и добавить имя хоста вашего клиента. так как вы используете angular , попробуйте localhost:4200 вместо *   -  person kcsujeet    schedule 17.07.2019
comment
Может быть, вы можете использовать прокси на передней стороне? stackoverflow .com/questions/47536466/   -  person Cyril    schedule 17.07.2019
comment
Я изменил «Access-Control-Allow-Origin» на адрес сервера, но снова не работает с той же ошибкой.   -  person Amal Raj P    schedule 17.07.2019
comment
Я пробовал использовать прокси, но все равно не работает   -  person Amal Raj P    schedule 17.07.2019

Ответы (4)


arrow_upward
1
arrow_downward

Мой код развернут на AWS, и это сработало для меня:

Помимо всех технических вещей (которые будут добавлены), которые указаны в нескольких других вопросах и ответах, убедитесь, что ваша функция возвращает ответ интерфейсу в течение 29 секунд. Это время ожидания по умолчанию (и максимальное время ожидания), установленное для вашего ответа. После исправления этого я смог сломать ошибку CORS.

person Sai Sreenivas    schedule 22.06.2020

arrow_upward
0
arrow_downward

Сообщение об ошибке указывает, что значение заголовка «Access-Control-Allow-Origin» в ответе не должно быть подстановочным знаком «*», когда режим учетных данных запроса «включить».

Если ваш внутренний сервер http://localhost:3000/, а ваш клиентский интерфейс работает на http://localhost:4000/, то ваши внутренние заголовки должны быть:

Бэкенд-сервер

app.use(cors());
app.use(function (req, res, next) {
  res.setHeader('Access-Control-Allow-Origin', 'http://localhost:4000/');
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, 
OPTIONS, PUT, PATCH, DELETE');
  res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');
  res.setHeader('Access-Control-Allow-Credentials', true);

  next();
});
person Christopher Peisert    schedule 18.07.2019

arrow_upward
0
arrow_downward

В вашем бэкэнде, поскольку вы используете модуль cors, вы можете сделать это, и это безопасно

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

//set options for cors
//add your frontend addresson in the origin 
//for testing add localhost  and port
var corsOptions = {
  origin: 'http://localhost:3000',
  optionsSuccessStatus: 200 // some legacy browsers (IE11, various SmartTVs) choke on 204
}

//for specific endpoint enable cors
app.get('/products/:id', cors(corsOptions), function (req, res, next) {
  res.json({msg: 'This is CORS-enabled for only example.com.'})
})

app.listen(80, function () {
  console.log('CORS-enabled web server listening on port 80')
})```
person Ashad Nasim    schedule 18.07.2019

arrow_upward
0
arrow_downward

Это может произойти и при использовании nginx на Mac (homebrew).

Если вы включите ведение журнала ошибок отладки, вы увидите эту ошибку при загрузке — это то, что на самом деле вызывает ошибку CORS:

25 open() "/usr/local/var/run/nginx/client_body_temp/0000000001" failed (13: Permission denied)

Это может быть ошибка в доморощенном nginx: https://github.com/denji/homebrew-nginx/issues/124

Не уверен, что это правильное исправление, но мне удалось заставить его работать следующим образом:

sudo chown YOUR-MACOS-USER /usr/local/var/run/nginx/client_body_temp/

После этого перезапустите nginx

person Tomov    schedule 14.12.2020