javascript — Ответ на предпечатный запрос не проходит проверку контроля доступа
Я получаю эту ошибку, используя ngResource для вызова REST API в Amazon Web Services:
XMLHttpRequest не может загрузить
http://server.apiurl.com:8000/s/login?login=facebook. Ответ на
предпечатная проверка не проходит проверку контроля доступа: нет
Заголовок «Access-Control-Allow-Origin» присутствует в запрошенном
ресурс. ПроисхождениеHTTP: // локальныйПоэтому не допускается доступ.
Ошибка 405
Обслуживание:
socialMarkt.factory('loginService', ['$resource', function($resource){
var apiAddress = "http://server.apiurl.com:8000/s/login/";
return $resource(apiAddress, { login:"facebook", access_token: "@access_token" ,facebook_id: "@facebook_id" }, {
getUser: {method:'POST'}
});
}]);
контроллер:
[...]
loginService.getUser(JSON.stringify(fbObj)),
function(data){
console.log(data);
},
function(result) {
console.error('Error', result.status);
}
[...]
Я использую Chrome, и я не знаю, что еще нужно сделать, чтобы решить эту проблему. Я даже настроил сервер для приема заголовков от источника localhost,
Решение
Вы сталкиваетесь с проблемами CORS.
Есть несколько способов исправить / обойти это.
- Выключите CORS. Например: как отключить cors в хроме
- Используйте плагин для вашего браузера
- Используйте прокси, такой как nginx. пример того, как настроить
Более подробно, вы пытаетесь получить доступ к api.serverurl.com с локального хоста. Это точное определение междоменного запроса.
Выключив его, просто чтобы выполнить свою работу (хорошо, поставьте себе низкую безопасность, если вы посещаете другие сайты и просто пинаете банку в будущем), вы можете использовать прокси, который заставляет ваш браузер думать, что все запросы приходят с локального хоста, когда на самом деле у вас есть локальный сервер, который затем вызывает удаленный сервер.
поэтому api.serverurl.com может стать localhost: 8000 / api, и ваш локальный nginx или другой прокси-сервер отправит в правильный пункт назначения.
Теперь по многочисленным просьбам, На 100% больше информации CORS….такой же отличный вкус!
И для downvoters …. в обход CORS это именно то, что показано для тех, кто просто изучает интерфейс.
https://codecraft.tv/courses/angular/http/http-with-promises/
Другие решения
Мой «API-сервер» является приложением PHP, поэтому для решения этой проблемы я нашел следующее решение:
Поместите линии в index.php
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE, OPTIONS');
header('Access-Control-Allow-Headers: Origin, Content-Type, X-Auth-Token');
В веб-интерфейсе AspNetCore эта проблема была исправлена путем добавления «Microsoft.AspNetCore.Cors» (версия 1.1.1) и добавления приведенных ниже изменений в файл Startup.cs.
public void ConfigureServices(IServiceCollection services)
{
services.AddCors(options =>
{
options.AddPolicy("AllowAllHeaders",
builder =>
{
builder.AllowAnyOrigin()
.AllowAnyHeader()
.AllowAnyMethod();
});
});
.
.
.
}
а также
public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
{
// Shows UseCors with named policy.
app.UseCors("AllowAllHeaders");
.
.
.
}
и положить [EnableCors("AllowAllHeaders")] на контроллере.
JavaScript XMLHttpRequest а также получать следовать политике того же происхождения. Так,
веб-приложение, использующее XMLHttpRequest или Fetch, может создавать только HTTP
запросы к собственному домену.
Источник: https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS
Вы должны отправить Access-Control-Allow-Origin: * HTTP-заголовок со стороны вашего сервера.
Если вы используете Apache в качестве HTTP-сервера, вы можете добавить его в файл конфигурации Apache следующим образом:
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"</IfModule>
Mod_headers по умолчанию включен в Apache, однако вы можете убедиться, что он включен, запустив:
a2enmod headers
Если вы пишете хром-расширение
Вы должны добавить в manifest.json разрешения для вашего домена (ов).
"permissions": [
"http://example.com/*",
"https://example.com/*"]
Если вы используете сервер IIS случайно. Вы можете установить заголовки ниже в опции заголовков HTTP-запроса.
Access-Control-Allow-Origin:*
Access-Control-Allow-Methods: 'HEAD, GET, POST, PUT, PATCH, DELETE'
Access-Control-Allow-Headers: 'Origin, Content-Type, X-Auth-Token';
с этим все сообщения, получить и т. д., будет работать нормально.
Для python flask server вы можете использовать плагин flask-cors для включения междоменных запросов.
В PHP вы можете добавить заголовки:
<?php
header ("Access-Control-Allow-Origin: *");
header ("Access-Control-Expose-Headers: Content-Length, X-JSON");
header ("Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE, OPTIONS");
header ("Access-Control-Allow-Headers: *");
...