У запитуваній помилці ресурсу немає заголовка 'Access-Control-Allow-Origin'

Я намагаюся отримати стрічку новинного веб-сайту. Думав, я скористаюся API подачі Google, щоб перетворити подачу подачі в 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

Тільки FYI, я помітив цю інформацію з документації jQuery, яка, на мою думку, стосується цієї проблеми:

Через обмеження безпеки браузера більшість запитів "Ajax" регулюються однаковою політикою походження ; запит не може успішно отримати дані з іншого домену, субдомену, порту або протоколу.

Зміна файлу хостів, як @thanix, для мене не спрацювало, але розширення, згадане @dkruchok, вирішило проблему.

Chrome не дозволяє інтегрувати два різних localhost, тому ми отримуємо цю помилку. Вам просто потрібно включити пакет 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 та методами отримання, надаючи користувацькі заголовки "access-control-allow-origin" та "access-control-allow-methods" для кожного запиту, який отримує браузер. Користувач може вмикати та вимикати розширення за допомогою кнопки на панелі інструментів. Щоб змінити спосіб зміни цих заголовків, використовуйте елементи контекстного меню, що клацнуть правою кнопкою миші. Ви можете налаштувати, який метод дозволено. Параметр за замовчуванням - дозволити методи "ОТРИМАТИ", "ВСТАВИТИ", "ОПИСАТИ", "ВИДАЛИТИ", "ГОЛОВУ", "ОПЦІЇ", "ПАТЧ". Ви також можете попросити розширення не перезаписувати ці заголовки, коли сервер їх вже заповнює.

ну, ще один спосіб - використовувати проксі-сервер 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 для виправлення помилки CORS

Будь ласка, використовуйте @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