Mobile Platform as a Service:Cross-origin resource sharing

Se o console do navegador exibir o erro Cross-Origin Request Blocked ao chamar APIs do gateway mPaaS em uma aplicação web, ative o CORS no Mobile Gateway para permitir requisições de origem cruzada da origem da aplicação.

Como o CORS funciona

Os navegadores aplicam a política de mesma origem, que bloqueia requisições de origem cruzada iniciadas por scripts. O Compartilhamento de recursos de origem cruzada (CORS) é um padrão W3C que permite aos servidores autorizar explicitamente requisições de outras origens.

Uma requisição é considerada de origem cruzada se a URL de destino diferir da URL da página em qualquer um dos seguintes aspectos:

• Domínio diferente (por exemplo, de example.com para api.otherservice.com)

• Subdomínio diferente (por exemplo, de app.example.com para api.example.com)

• Porta diferente (por exemplo, de example.com para example.com:8080)

• Protocolo diferente (por exemplo, de https://example.com para http://example.com)

Existem dois tipos de requisições CORS:

• Requisições simples

• Requisições de preflight: antes de enviar a requisição real, o navegador envia uma requisição de preflight com o método OPTIONS para confirmar se o servidor permite a requisição de origem cruzada. O navegador só envia a requisição real após a confirmação do servidor.

Requisições simples

Uma requisição é classificada como simples quando atende a todas as condições abaixo:

• O método da requisição é um dos seguintes:

  • HEAD

  • GET

  • POST

• Os cabeçalhos da requisição HTTP contêm apenas os seguintes campos:

  • Cache-Control

  • Content-Language

  • Content-Type

  • Expires

  • Last-Modified

  • Pragma

  • DPR

  • Downlink

  • Save-Data

  • Viewport-Width

  • Width

• O cabeçalho Content-Type tem um dos seguintes valores:

  • text/plain

  • multipart/form-data

  • application/x-www-form-urlencoded

Requisições de preflight

Qualquer requisição que não atenda aos critérios de requisição simples aciona um preflight. O navegador envia primeiro uma requisição OPTIONS com os seguintes cabeçalhos:

• Origin: a origem da requisição.

• Access-Control-Request-Method: o método HTTP da próxima requisição, como POST ou GET.

• Access-Control-Request-Headers: os cabeçalhos incluídos na próxima requisição.

O servidor responde com sua política de CORS:

• Access-Control-Allow-Origin: as origens autorizadas a fazer requisições de origem cruzada.

• Access-Control-Allow-Methods: os métodos HTTP permitidos para requisições de origem cruzada.

• Access-Control-Allow-Headers: os cabeçalhos de requisição permitidos em requisições de origem cruzada.

• Access-Control-Expose-Headers: os cabeçalhos de resposta acessíveis ao navegador.

• Access-Control-Max-Age: o tempo, em segundos, durante o qual o navegador pode armazenar em cache a resposta do preflight.

• Access-Control-Allow-Credentials: indica se o navegador pode enviar cookies com a requisição.

Se o preflight for aprovado, o navegador envia a requisição real.

Configurar o CORS

O Mobile Gateway do mPaaS permite configurar regras de CORS por combinação de appId e workspaceId para controlar quais requisições de origem cruzada são permitidas.

Ativar o CORS no console

Faça login no console do mPaaS e siga as etapas abaixo:

1. No painel de navegação à esquerda, escolha Backend Service Management > Mobile Gateway.

2. No painel de navegação à esquerda, escolha Mobile Gateway.

3. Escolha a aba Gateway Management e, em seguida, a aba Feature Switch. Configure o CORS.

Após ativar o CORS, todos os serviços de API da aplicação no workspace aceitarão requisições de origem cruzada correspondentes às regras configuradas. Defina os seguintes campos:

• Origens permitidas: Access-Control-Allow-Origin. Uma ou mais origens, separadas por vírgulas. O caractere curinga (*) é permitido.

• Métodos permitidos: Access-Control-Allow-Methods. Um ou mais métodos HTTP.

• Cabeçalhos permitidos: Access-Control-Allow-Headers. Um ou mais cabeçalhos de requisição, separados por vírgulas. O caractere curinga (*) é permitido.

• Cabeçalhos expostos: Access-Control-Expose-Headers. Um ou mais cabeçalhos de resposta acessíveis ao navegador, separados por vírgulas. O caractere curinga (*) não é permitido.

• Idade máxima: Access-Control-Max-Age. O tempo, em segundos, durante o qual o navegador armazena em cache a resposta do preflight.

• Permitir credenciais: Access-Control-Allow-Credentials. Indica se o navegador pode enviar cookies com requisições de origem cruzada.

Enviar requisições de origem cruzada

Adicione o cabeçalho X-CORS-${appId}-${workspaceId} a todas as requisições de API de origem cruzada. Quando uma requisição de preflight chega ao gateway, ele analisa esse cabeçalho em Access-Control-Request-Headers para obter o appId e o workspaceId e localizar a configuração correta de CORS.

Uma requisição ao gateway de origem cruzada deve incluir os seguintes cabeçalhos:

• X-CORS-\${AppId}-\${WorkspaceId}: obrigatório. Substitua os espaços reservados pelo AppId e WorkspaceId reais.

• Operation-Type

• WorkspaceId

• AppId

• Content-Type

• Version

O exemplo a seguir mostra uma requisição de origem cruzada com jQuery Ajax. Liste todos os cabeçalhos personalizados em Allowed headers na configuração de CORS:

$.ajax({
    url: 'http://${mpaasgw_host}/mgw.htm',// Enter the gateway address
    headers: {
      'X-CORS-${appId}-${workspaceId}':'1', // This request header is required
      'Operation-Type':${operationType}, // Enter the operationType
      'AppId':${appId}, // Enter the appId      
      'WorkspaceId':${worksapceId}, // Enter the workspaceId
      'Content-Type':'application/json',
      'Version':'2.0',
    },
    type: 'POST',
    dataType: 'json',
    data: JSON.stringify(reqData),
    success: function(data){}
  });