Заголовок Access-Control-Allow-Origin отсутствует в запрошенной ошибке ресурса

Я пытаюсь получить ленту новостного сайта. Думал, что буду использовать API фидов Google, чтобы преобразовать фид Feedburner в json. Следующий URL вернет 10 сообщений из ленты в формате json. http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&q=http://feeds.feedburner.com/mathrubhumi

Я использовал следующий код, чтобы получить содержимое указанного выше URL

$.ajax({
  type: "GET",
  dataType: "jsonp",
  url: "http://ajax.googleapis.com/ajax/services/feed/load",
  data: {
    "v": "1.0",
    "num": "10",
    "q": "http://feeds.feedburner.com/mathrubhumi"
  },
  success: function(result) {
    //.....
  }
});

но он не работает, и я получаю следующую ошибку

XMLHttpRequest не может загрузить http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&q=http%3A%2F%2Ffeeds.feedburner.com%2Fmathrubhumi . На запрошенном ресурсе нет заголовка Access-Control-Allow-Origin. Источник ' http: // localhostСледовательно, к источнику ' доступ запрещен.

Как это исправить?

Я считаю, что это может быть связано с тем, что Chrome не поддерживает localhostрешение Access-Control-Allow-Origin- см. Проблему Chrome

Чтобы Chrome отправлял Access-Control-Allow-Originзаголовок, просто укажите псевдоним вашего localhost в файле / etc / hosts для другого домена, например:

127.0.0.1   localhost yourdomain.com

Тогда, если вы получите доступ к своему сценарию с помощью yourdomain.comвместо localhost, вызов должен быть успешным.

Если вы используете браузер Google Chrome, вы можете взломать его с помощью расширения.

Вы можете найти расширение Chrome, которое будет изменять заголовки CORS на лету в вашем приложении. Очевидно, это только Chrome, но мне нравится, что он вообще работает без каких-либо изменений.

Вы можете использовать его для отладки вашего приложения на локальном компьютере (если все работает в продакшене).

Примечание : если URL-адрес становится неработающим, имя расширения - Access-Control-Allow-Origin: * . Я рекомендую вам отключить это расширение, когда вы не работаете над своими материалами, потому что, например, youtube не работает с этим расширением.

Попробуйте это - установите вызов Ajax, настроив заголовок следующим образом:

var uri = "http://localhost:50869/odata/mydatafeeds"
$.ajax({
    url: uri,
    beforeSend: function (request) {
        request.setRequestHeader("Authorization", "Negotiate");
    },
    async: true,
    success: function (data) {
        alert(JSON.stringify(data));
    },
    error: function (xhr, textStatus, errorMessage) {
        alert(errorMessage);
    }                
});

Затем запустите свой код, открыв Chrome с помощью следующей командной строки:

chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-security

К вашему сведению, я заметил эту информацию из документации jQuery, которая, как мне кажется, применима к этой проблеме:

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

Изменение файла hosts, например @thanix, у меня не сработало, но расширение, упомянутое @dkruchok, решило проблему.

Chrome не позволяет интегрировать два разных локальных хоста, поэтому мы получаем эту ошибку. Вам просто нужно включить пакет Microsoft Visual Studio Web Api Core из диспетчера nuget и добавить две строки кода в проект WebApi в свой WebApiConfig.cs файл.

var cors = new EnableCorsAttribute("*", "*", "*");
config.EnableCors(cors);

Тогда все готово.

Если он вызывает службу весенней загрузки. вы можете справиться с этим, используя приведенный ниже код.

@Bean
public WebMvcConfigurer corsConfigurer() {
    return new WebMvcConfigurerAdapter() {
        @Override
        public void addCorsMappings(CorsRegistry registry) {
            registry.addMapping("/**")
                    .allowedOrigins("*")
                    .allowedMethods("GET", "POST", "PUT", "DELETE", "HEAD", "OPTIONS")
                    .allowedHeaders("*", "Access-Control-Allow-Headers", "origin", "Content-type", "accept", "x-requested-with", "x-requested-by") //What is this for?
                    .allowCredentials(true);
        }
    };
}

Для разработки можно использовать https://cors-anywhere.herokuapp.com , для производства лучше настроить собственный прокси

async function read() {
   let r= await (await fetch('https://cors-anywhere.herokuapp.com/http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&q=http://feeds.feedburner.com/mathrubhumi')).json();
   console.log(r);
}

read();

Разблокировка cors отлично работает для Chrome 78 [COrs unb] [1] https://chrome.google.com/webstore/detail/cors-unblock/lfhmikememgdcahcdlaciloancbhjino

это плагин для Google Chrome под названием "cors unblock"

Сводка: больше нет ошибки CORS, добавив заголовок Access-Control-Allow-Origin: * к локальным и удаленным веб-запросам при включении

Это расширение обеспечивает контроль над методами XMLHttpRequest и fetch, предоставляя настраиваемые заголовки «access-control-allow-origin» и «access-control-allow-methods» для каждого запроса, получаемого браузером. Пользователь может включать и выключать расширение с помощью кнопки на панели инструментов. Чтобы изменить способ изменения этих заголовков, используйте элементы контекстного меню, вызываемые правой кнопкой мыши. Вы можете настроить разрешенный метод. По умолчанию разрешены методы «GET», «PUT», «POST», «DELETE», «HEAD», «OPTIONS», «PATCH». Вы также можете попросить расширение не перезаписывать эти заголовки, когда сервер их уже заполняет.

ну, другой способ - использовать прокси cors , вам просто нужно добавить https://cors-anywhere.herokuapp.com/ перед своим URL-адресом. поэтому ваш URL-адрес будет похож на https://cors-anywhere.herokuapp.com/http : //ajax.googleapis.com/ajax/services/feed/load .

Прокси-сервер получает http://ajax.googleapis.com/ajax/services/feed/load с указанного выше URL. Затем он делает запрос на получение ответа от этого сервера. И наконец, прокси применяет

Access-Control-Allow-Origin: *

к первоначальному ответу.

Это отличное решение, потому что оно работает как в разработке, так и в производстве. Таким образом, вы пользуетесь преимуществом того факта, что политика одного и того же происхождения реализуется только при обмене данными между браузером и сервером. Это означает, что его не нужно применять при межсерверной коммуникации!

вы можете узнать больше о решении здесь, в Medium 3 Ways to Fix the CORS Error

Пожалуйста , используйте @CrossOriginна backendsideконтроллере загрузки Spring (либо уровень класса или метод уровень) в качестве решения для ошибки Chrome'No 'Access-Control-Allow-Origin' заголовка присутствует на запрошенный ресурсе.

Это решение работает для меня на 100% ...

Пример: уровень класса

@CrossOrigin
@Controller
public class UploadController {

----- ИЛИ -------

Пример: уровень метода

@CrossOrigin(origins = "http://localhost:3000", maxAge = 3600)
@RequestMapping(value = "/loadAllCars")
    @ResponseBody
    public List<Car> loadAllCars() {


Ref: https://spring.io/blog/2015/06/08/cors-support-in-spring-framework