ReactJS cors "Заголовок 'Access-Control-Allow-Origin' содержит несколько значений"

Question

Сценарий

Я использую fetch для сбора json с моего удаленного apache сервера. Вначале я получал следующее нарушение CORS:

Доступ к выборке в 'http://dev.mediajackagency.com/clients/dawna/row/wordpress/wp-content/uploads/2019/01/bw.jpg' из источника 'http://localhost: 3000 ' был заблокирован политикой CORS: Ответ на запрос предварительной проверки не прошел проверку контроля доступа: в запрошенном ресурсе отсутствует заголовок «Access-Control-Allow-Origin». Если непрозрачный ответ удовлетворяет вашим потребностям, установите режим запроса «no-cors», чтобы получить ресурс с отключенным CORS.

Я преодолел эту проблему, включив CORS в файле .htaccess сервера для этот проект

Header always set Access-Control-Allow-Origin "*"
Header always set Access-Control-Allow-Credentials "true"
Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"
Header always set Access-Control-Max-Age "1000"
Header always set Access-Control-Allow-Headers "x-requested-with, Content-Type, origin, authorization, accept, client-security-token"

Теперь я получаю другое нарушение CORS

Доступ к выборке в 'http://some.domain/some/endpoint' из источника 'http://localhost: 3000 'было заблокировано политикой CORS: Ответ на запрос предварительной проверки не проходит проверку контроля доступа: Заголовок' Access-Control-Allow-Origin 'содержит несколько значений' *, http://localhost: 3000 ', но разрешен только один. Попросите сервер отправить заголовок с допустимым значением или, если непрозрачный ответ удовлетворяет вашим потребностям, установите режим запроса в 'no-cors', чтобы получить ресурс с отключенным CORS.

Вопрос

Как я могу найти, где Access-Control-Allow-Origin устанавливается для localhost:3000? Я выполнил полный индекс и ищу строки, связанные с cors, headers, et c et c, но безуспешно. Все идеи приветствуются.

Дополнительно

• Через npm start второе значение ACAO localhost:3000, но через npm build второе значение ACAO localhost, поэтому второе значение выглядит как Dynami c и ограничено значением React
• Добавление значения proxy в package.json не помогает

Answer 1

В конечном итоге я не мог решить, создает ли эта проблема сервер dev-узла CRA (добавив localhost: 3000 в качестве разрешенного источника) или я просто не так хорош с .htaccess файлы, как я и думал. Независимо от того, что в конечном итоге заработало:

.htaccess сервера API

# allows image files to bypass cors @jkr
<Files *.jpg>
  Header always set Access-Control-Allow-Origin "*"
  Header always set Access-Control-Allow-Credentials "true"
  Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"
  Header always set Access-Control-Max-Age "1000"
  Header always set Access-Control-Allow-Headers "x-requested-with, Content-Type, origin, authorization, accept, client-security-token"
</Files>

#always allow preflight to pass @jkr
<LimitExcept OPTIONS>
  RewriteEngine On
  RewriteCond %{REQUEST_METHOD} OPTIONS
  RewriteRule ^(.*)$ $1 [R=200,L]
</LimitExcept>