REST API - Проблемы CORS

CORS - проблема для меня ..

Я создал REST API с SPRING на http: // локальный: 8080, и я использовал этот API с простым сайтом JS на http: // localhost, но после применения OAuth2 меня начала беспокоить следующая ошибка.

Access to XMLHttpRequest at 'http://localhost:8080/oauth/token' from origin 'http://localhost' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status

Я мог получить доступ к API без проблем с CORS до OAuth (с AJAX и POSTMAN), а после применения OAuth я мог использовать API только в POSTMAN, но я не мог сделать то же самое с AJAX.

Мой код AJAX:

function pronta(){
    var username = "postmain"; // yes, I wrote wrong
    var password = "1234";  

    function make_base_auth(user, password) {
      var tok = user + ':' + password;
      var hash = btoa(tok);
      return "Basic " + hash;
    }
    $.ajax
      ({
        type: "POST",
        url: "http://localhost:8080/oauth/token",
        dataType: 'json',
        data: {
            'grant-type': 'password',
            'username': 'Tiago',
            'password': '123'
        },
        header:{'Authorization': make_base_auth(username, password)}, // I've tried on both manners. with header and with beforeSend
        beforeSend: function (xhr){ 
            xhr.setRequestHeader('Authorization', make_base_auth(username, password)); 
        },
        success: function (){
            alert('done'); 
        }
    });
}

Мой фильтр CORS (в SPRING REST API)

    @Component
    public class SimpleCORSFilter implements Filter {
    @Override
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) res;
        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, PUT, OPTIONS, DELETE, PATCH");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");

        chain.doFilter(req, res);
    }

    @Override
    public void init(FilterConfig filterConfig) {}

    @Override
    public void destroy() {}

}

Фильтр работал хорошо до OAuth

Некоторые идеи, что происходит?

Tks

когда вы отлаживаете консоль браузера, получаете ли вы в ответ все Access-Control-Allow-Origin = * и ..... все, что вы добавили в SimpleCorsFilter?

Jonathan JOhx 21.12.2018 20:20

да. В POSTMAN и Chrome (я вижу в разделе «Сеть» Chrome DEVTools)

Tiago Ferreira 21.12.2018 20:25

ОК, затем в заголовки «header: {'Authorization': make_base_auth (username, password)}» добавьте те же заголовки, которые вы добавили в SimpleCorsFilter.

Jonathan JOhx 21.12.2018 20:30

Та же ошибка, но «Заголовки запроса-контроля доступа» изменены на «заголовки-разрешения-контроля-доступа, разрешенные-методы-управления доступом, происхождение разрешения-управления доступом, контроль доступа». -максимальный возраст, авторизация ». Раньше была просто "авторизация"

Tiago Ferreira 21.12.2018 20:46

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

Jonathan JOhx 21.12.2018 20:51

здесь есть инструмент для этого? Я имею в виду, на СТЕКЕ

Tiago Ferreira 21.12.2018 21:36

возможно, вы можете использовать github .. Я хотел, чтобы вы попробовали макет для проверки, можете ли вы получить значения json ... mockable.io, если что-то работает хорошо, поэтому нам нужно анализировать журналы

Jonathan JOhx 21.12.2018 21:42

Я сделал репо на "github.com/tbattiva/REST-CORSProblem", в файле "index.html" есть функция, используемая клиентом.

Tiago Ferreira 21.12.2018 22:50
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
8
2 341
2

Ответы 2

Я понял.. Проблема заключалась в том, что каждый раз, когда я пытался сделать запрос, предварительный запрос был субимитирован раньше (например, для этого предназначена архитектура REST).

Принимая это во внимание, я просто подготавливаю сервер для разрешения методов OPTIONS.

Нравится..

@Order(-1)    
@Override
    protected void configure(HttpSecurity http) throws Exception {
        http
        .authorizeRequests()
        .antMatchers(HttpMethod.OPTIONS, "/oauth/token").permitAll();
    }

Не забудьте аннотацию @Configuration перед началом занятия.

Это может помочь:

@Component
    public class SimpleCORSFilter implements Filter {
    @Override
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) res;
        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, PUT, OPTIONS, DELETE, PATCH");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");

   if ("OPTIONS".equalsIgnoreCase(request.getMethod())) {
            response.setStatus(HttpServletResponse.SC_OK);
        } else {
            chain.doFilter(request, response);
        }

    }

@Override
public void init(FilterConfig filterConfig) {}

@Override
public void destroy() {}

}

Другие вопросы по теме