Pure HTML формы работы, тот же запрос с Ajax не удается

Question

Этот HTML-формы действительно отправить запрос, и аутентификация Google работает:

<form action="/auth/google" method="get"> 
    <button type="submit"> 
     Login with google 
    </button> 
</form> 

Однако содержание ответа (JSON) отображается в браузере, как HTML-страница, и по какой-то причине заменяет текущую страницу. Если я не могу подавать форму (т. Е. e.preventDefault()), ничего не происходит вообще. Я не знаю, как просто поймать JSON.

Так что я пытаюсь сделать тот же вызов, используя Ajax

<button type="submit" id="btnGoogle"> 
    Login with google 
</button> 

<script> 

    $('#btnGoogle').click((e) => { 

     $.ajax({ 
       type: "GET", 
       url :"/auth/google", 
       dataType : "json", 
       crossDomain : true, // no effect 
       headers : { 
        // Tried many headers, no effect 
       } 
      }) 
      .success((data) => { 
       console.log("Success!", data)) 
      }) 
      .error((err) => { 
       console.error(err.statusText); 
      }) 
     }); 

    </script> 

, но я получаю ошибку Междоменные

XMLHttpRequest не может загрузить https://accounts.google.com/o/oauth2/v2/auth?response_type=code&redirect_ur ... d = 178168129307-5g50gah2he0gjjl2or73a1va8ha66s24.apps .googleusercontent.com. Нет заголовка «Access-Control-Allow-Origin» на запрашиваемом ресурсе . Origin 'http://localhost:8100' поэтому не допускается доступ.

На узле/Экспресс-сервер:

app.get('/auth/google', 
    passport.authenticate('google', { 
     scope: ['https://www.googleapis.com/auth/plus.profile.emails.read'] 
    })); 

Как прийти в форму HTML, которая достигает тот же самый маршрут сервера с теми же параметрами, что делает его, но вызов Ajax не делает?

Редактировать

Я нашел обходной путь путем установки CORS extension for Chrome, так что ... Да, это вроде работает, но почему вызов Ajax это нужно, в то время как регулярная форма HTML не делает?

Answer 1

Re: почему нужно вызов Ajax это, в то время как регулярная форма HTML не ":

Ваши основные ajax вызовы не могут серверный процесс перенаправляет на всех, так что не может справиться с переадресацией из системы OAuth от Google .

чтобы избежать этой проблемы для всех поставщиков OAuth я должен был убедиться, что ссылки входа не были обработаны Ajax и позволил браузеру обрабатывать любые редиректы.

Использование iframe для обработки внешнего входа и последующего перенаправления были бы еще одним вариантом, если вы хотите, чтобы он выглядел как SPA.