No momento, estou implementando o login do OAuth com o LinkedIn no meu aplicativo React and Play e estou com um erro de CORS ao tentar redirecionar para a página de autorização no meu ambiente de desenvolvimento:

XMLHttpRequest cannot load https://www.linkedin.com/oauth/v2/authorization?response_type=code&client_i…basicprofile&redirect_uri=http%3A%2F%2Flocalhost%3A9000%2Fusers%2Flinkedin. Redirect from 'https://www.linkedin.com/oauth/v2/authorization?response_type=code&client_i…basicprofile&redirect_uri=http%3A%2F%2Flocalhost%3A9000%2Fusers%2Flinkedin' to 'https://www.linkedin.com/uas/login?session_redirect=%2Foauth%2Fv2%2Flogin-s…' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

Eu tenho a seguinte configuração:

Jogar servidor executando no localhost: 9000Aplicativo React (criado via create-react-app) em execução no localhost: 3000

Meu código JS chama o/auth/linkedin terminal que é implementado da seguinte maneira:

Action { implicit req: RequestHeader =>
  val csrfToken = CSRF.getToken.get.value
  Redirect(linkedinUrl(oauthConfig.linkedinClientId, csrfToken)).withSession("state" -> csrfToken)
}

Eu tenho meu aplicativo Play definido para lidar com o CORS adequadamente.

Meu aplicativo de reação apenas faz uma solicitação para o endpoint acima via Axios:

axios.get('/auth/linkedin')

Isso responde com um 303 com um redirecionamento para a página de autenticação do LinkedIn, que me dá o erro.

Como faço para que a política do CORS funcione corretamente nesta configuração do desenvolvedor? Tentei adicionar o seguinte ao meu package.json, como recomenda a documentação do create-react-app:

"proxy": "http://localhost:9000",

E também tentei definir um cabeçalho de solicitação como"Access-Control-Allow-Origin" : "*" no redirecionamento no servidor Play sem êxito.

Observe que acessar localhost: 9000 / auth / linkedin redireciona corretamente.