Заголовок «Access-Control-Allow-Origin» заблокирован политикой CORS

Создаю API, BackEnd и Frontend сайт.

Я использовал Express для API, BackEnd - FrontEnd с использованием ReactJs

Так что в моем локальном все работает. Но когда я развернулся на сервере, это сообщение об ошибке показывает

Access to XMLHttpRequest at 'http://domain/headline' from origin 'http://domain' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header contains multiple values '*, *', but only one is allowed.

а также

Access to XMLHttpRequest at 'http://domain/marketData/snack' from origin 'http://domain' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

в ReactJs я использую axios для получения данных.

И на моем сервере nginx я уже установил

location / {
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-NginX-Proxy true;
        proxy_pass http://127.0.0.1:3001;
        proxy_set_header Host $http_host;
        proxy_cache_bypass $http_upgrade;
        proxy_redirect off;
        if ($request_method = 'GET') {
                add_header 'Access-Control-Allow-Origin' 'http://domain';
                add_header 'Access-Control-Allow-Credentials' 'true';
                add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
                add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
            }
    }

Я что-то пропустил?

reactjs api express axios

20.03.2019 05:05

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

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

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

7 174

Ответы 1

Сначала установите кор из нпм с помощью npm i cors на вашем API-сервере. Затем в вашем app.js или server.js или index.js (основной файл, который вы создаете http-сервис) используйте эту строку кода

const cors = require('cors');
app.use(cors());
app.options('*', cors());

да, для экспресса уже используется cors.

— 20.03.2019 05:31

Итак, теперь вам нужно просто разрешить cors в вашем внешнем сервисе. Пожалуйста, проверьте ответ на этот пост, он может вам помочь stackoverflow.com/questions/43462367/…

— 20.03.2019 05:38

20.03.2019 05:19