В запрошенной ошибке ресурса отсутствует заголовок "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/' не разрешено.
Как это исправить?
13 ответов
Я полагаю, что это может быть связано с тем, что 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
Разблокировка 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". Вы также можете попросить расширение не перезаписывать эти заголовки, когда сервер их уже заполняет.
Другой способ их решения - добавить приведенный ниже фрагмент кода в основной класс приложения, который содержит
'@SpringBootApplication'и при необходимости перезапустите сервер. Это сработало для меня.
@Bean
public CorsFilter corsFilter() {
CorsConfiguration corsConfiguration = new CorsConfiguration();
corsConfiguration.setAllowCredentials(true);
corsConfiguration.setAllowedOrigins(Arrays.asList("http://localhost:4200"));
corsConfiguration.setAllowedHeaders(Arrays.asList("Origin","Access-Control-Allow-Origin",
"Content-Type","Accept","Authorization","Origin,Accept","X-Requested-With",
"Access-Control-Request-Method","Access-Control-Request-Headers"));
corsConfiguration.setExposedHeaders(Arrays.asList("Origin","Content-Type","Accept","Authorization",
"Access-Control-Allow-Origin","Access-Control-Allow-Origin","Access-Control-Allow-Credentials"));
corsConfiguration.setAllowedMethods(Arrays.asList("GET","PUT","POST","DELETE","OPTIONS"));
UrlBasedCorsConfigurationSource urlBasedCorsConfigurationSource = new UrlBasedCorsConfigurationSource();
urlBasedCorsConfigurationSource.registerCorsConfiguration("/**", corsConfiguration);
return new CorsFilter(urlBasedCorsConfigurationSource);
}
Просто к вашему сведению, я заметил эту информацию из документации jQuery, которая, по моему мнению, относится к этой проблеме:
Из-за ограничений безопасности браузера большинство запросов "Ajax" подчиняются той же политике происхождения; запрос не может успешно получить данные из другого домена, субдомена, порта или протокола.
Изменение файла hosts, например @thanix, не сработало для меня, но расширение, упомянутое @dkruchok, решило проблему.
Ну , другой способ - использовать прокси 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
Chrome не позволяет интегрировать два разных локальных хоста, поэтому мы получаем эту ошибку. Вам просто нужно включить пакет Microsoft Visual Studio Web Api Core из nuget manager. И добавить две строки кода в проект WebApi в ваш WebApiConfig.cs файл.
var cors = new EnableCorsAttribute("*", "*", "*");
config.EnableCors(cors);
Тогда все сделано.
Если вы используете Express,
добавьте маршруты после использования cors.
app.use (корс ());
app.use('/сообщения', postRoutes);
Для разработки вы можете использовать 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();Вы также можете установить это расширение, если вы используете Chrome.
Access-Control-Allow-Origin: *
Если это вызывает весенний сервис загрузки. Вы можете справиться с этим, используя код ниже.
@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);
}
};
}
Пожалуйста, используйте @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