У меня проблема с моим изоморфным приложением JavaScript, использующим React и Express.

Я пытаюсь сделать HTTP-запрос с axios.get, когда мой компонент монтируется

componentDidMount() {
  const url = 'http://ufc-data-api.ufc.com/api/v3/iphone/fighters/title_holders';
  axios.get(url).then( res => {
    //use res to update current state
  })
}

Я получаю статус 200 res от API, но я не получаю никаких данных ответа и получаю сообщение об ошибке в своей консоли

XMLHttpRequest cannot load http://ufc-data-api.ufc.com/api/v3/iphone/fighters/title_holders. 
No 'Access-Control-Allow-Origin' header is present on the requested resource. 
Origin 'http://localhost:3000' is therefore not allowed access.

Тем не менее, если я сделаю запрос в моем server.js

const url = 'http://ufc-data-api.ufc.com/api/v3/iphone/fighters/title_holders';
axios.get(url).then(res => {
    //console.log(res);
});

Он работает нормально, и я получаю данные ответа при запуске сервера. Это проблема с настоящим API или я что-то не так делаю? Если бы это была проблема с CORS, я думаю, запрос в server.js тоже не сработал бы? Благодарность!

51
Scott Davidson 6 Янв 2017 в 04:48

9 ответов

Лучший ответ

CORS - это функция браузера . Серверы должны включить CORS, чтобы браузеры могли обходить политику одного и того же происхождения. Ваш сервер не будет иметь такого же ограничения и сможет отправлять запросы на любой сервер с открытым API. https://developer.mozilla.org/en-US/docs/Web / HTTP / Access_control_CORS

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

17
azium 6 Янв 2017 в 02:10

Поскольку на сервере нет заголовка CORS, вы не можете получить ответ.

Это заголовок API, который я получил из браузера Chrome:

Age:28
Cache-Control:max-age=3600, public
Connection:keep-alive
Date:Fri, 06 Jan 2017 02:05:33 GMT
ETag:"18303ae5d3714f8f1fbcb2c8e6499190"
Server:Cowboy
Status:200 OK
Via:1.1 vegur, 1.1 e01a35c1b8f382e5c0a399f1741255fd.cloudfront.net (CloudFront)
X-Amz-Cf-Id:GH6w6y_P5ht7AqAD3SnlK39EJ0PpnignqSI3o5Fsbi9PKHEFNMA0yw==
X-Cache:Hit from cloudfront
X-Content-Type-Options:nosniff
X-Frame-Options:SAMEORIGIN
X-Request-Id:b971e55f-b43d-43ce-8d4f-aa9d39830629
X-Runtime:0.014042
X-Ua-Compatible:chrome=1
X-Xss-Protection:1; mode=block

Нет заголовка CORS в заголовках ответа.

0
Thanh Nguyen 6 Янв 2017 в 02:08

У меня была такая же проблема с командой fetch. Краткий обзор здесь. говорит нам это:

Если сервер, с которого вы запрашиваете, не поддерживает CORS, вы должны получить сообщение об ошибке в консоли, указывающее, что запрос перекрестного источника заблокирован из-за отсутствия заголовка CORS Access-Control-Allow-Origin.

Вы можете использовать режим no-cors для запроса непрозрачных ресурсов.

fetch('https://bar.com/data.json', {
  mode: 'no-cors' // 'cors' by default
})
.then(function(response) {
  // Do something with response
});
0
Yigit Alparslan 5 Янв 2020 в 10:20

Используйте расширение Google Chrome под названием Allow-Control-Allow-Origin: *. Он изменяет заголовки CORS на лету в вашем приложении.

18
Colleen Purcell 22 Мар 2017 в 00:28

Я думаю, что ответ на ваш вопрос

Community 23 Май 2017 в 10:30

У меня такая же проблема. другие ответы верны, но есть другое решение. Вы можете установить заголовок ответа, чтобы разрешить доступ из разных источников. в соответствии с этим постом Вы должны добавить следующие коды перед любым вызовом app.get:

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "X-Requested-With");
  next();
  });

Это сработало для меня :)

0
arash nadali 26 Фев 2019 в 08:31

Я столкнулся с той же ошибкой сегодня, используя React с Typescript и серверную часть с загрузкой Java Spring, если у вас есть рука на вашем сервере, вы можете просто добавить файл конфигурации для CORS.

В приведенном ниже примере я установил для разрешенного источника значение *, чтобы разрешить все, кроме вас, можно указать более конкретный вариант и задать только URL-адрес, например, http: // localhost: 3000.

import org.springframework.boot.web.servlet.FilterRegistrationBean;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

@Configuration
public class AppCorsConfiguration {
    @Bean
    public FilterRegistrationBean corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration config = new CorsConfiguration();
        config.setAllowCredentials(true);
        config.addAllowedOrigin("*");
        config.addAllowedHeader("*");
        config.addAllowedMethod("*");
        source.registerCorsConfiguration("/**", config);
        FilterRegistrationBean bean = new FilterRegistrationBean(new CorsFilter(source));
        bean.setOrder(0);
        return bean;
    }
}
0
Loup Ollivier 17 Дек 2019 в 19:42

Я не знаю, поможет ли это, но я получал ту же ошибку при удаленной отладке собственного приложения. Я запускал отладчик на 192.168.x.x: 8081 . Я немного прочитал об этом перекрестном Origin Resource Sharing (CORS), чтобы узнать, что такое CORS. (Я новичок) и изменил свой URL с IP: 8081 на localhost: 8081 , и моя проблема была решена.

0
Mingina 18 Сен 2018 в 04:37
        //install cors using terminal/command  
        $ npm install cors

        //If your using express in your node server just add
        var cors = require('cors');
        app.use(cors())


       //and re-run the server, your problem is rectified][1]][1]
       **If you won't be understood then see below image**

https://i.stack.imgur.com/Qeqmc.png

1
HandyPawan 4 Фев 2020 в 12:49