Erro CORS nas APIs

VTEX in your native language 🌎 Português
1

Estou tentando consultar a API de catálogo e de pedidos em uma aplicação fora da Vtex. Estou utilizando angular, enviando o App-Key e o App-Token, mas fica dando erro de CORS.

const httpOptions = { headers: new HttpHeaders( { 'X-VTEX-API-AppKey': XXX', 'X-VTEX-API-AppToken': 'XXX', 'Content-Type': 'application/json', 'Accept': 'application/vnd.vtex.ds.v10+json' }) }; return this.http.get(`${this.config.baseAPIVtex}catalog_system/pub/products/search?fq=B:${id}`, httpOptions);

No próprio navegador, se mando uma requisição AJAX simples, também dá erro de CORS.

$.ajax({ url: 'https://{{loja}}.vtexcommercestable.com.br/api/catalog_system/pub/products/search?fq=B:{{ID}}', type: 'GET', headers: { 'Accept': 'application/jsonp', 'Content-Type': 'application/jsonp', 'X-VTEX-API-AppKey': 'XXX', 'X-VTEX-API-AppToken': 'XXX', } }).then(res => {console.log('res', res)})

Não é possível fazer essa requisição via browser mesmo passando o App-Key e o App-Token?

2

Boa tarde, Marcela! Tudo bom?

Recomendo a leitura deste artigo: https://help.vtex.com/pt/faq/evitando-cors-em-suas-chamadas-ao-masterdata

Caso possua alguma dúvida mais específica, recomendo a abertura de um chamado :)

3

Primeiro que par requisições públicas não é necessário appKey e token, nos dois exemplos informados está /pub/.

Outro ponto é que se o script está rodando dentro da loja, não é necessário adicionar https://accountname.vtexcommer..... apenas "/api" em diante.

Faça esse teste e veja se resolveu

2 Likes
4

@Carla Frimer​ @Nathan Prestes​ Obrigada pelas respostas.

Mas não estou fazendo consulta no MasterData (essas funcionam normalmente) e nem num ambiente dentro da Vtex.

É uma aplicação feita em Angular em um domínio fora da Vtex. Preciso exibir os produtos de uma marca (API Catálogo) e os pedidos feitos com um produto específico (API OMS).

Ambas, sendo pública ou não, passando App-Key e App-Token ou não, retornam erro de CORS.

Tentei fazer a mesma chamada apenas com uma requisição AJAX simples e também retorna o mesmo erro.

Fazendo a requisição no backend, com Node, funcinou.

Quero saber se é possível consultar as APIs no front ou apenas no back.

O primeiro código é a requisição da minha aplicação em Angular e o segundo é a requisição AJAX feita no navegador.

5

Entendido Marcela, se é uma aplicação externa necessita do accountname.vtexcommerce.

Me atentei agora de que o accept e o content-type está com

application/jsonp

quando na documentação está

application/json

Já realizou um teste dessa forma?

6

@Nathan Prestes​ Já sim. Esse jsonp aí foi errado hehe

Mas mesmo só com json dá erro.

7

@Carla Frimer​ Alguma sugestão?

8

Oi @Marcela Afonso​ , abre um ticket para que possamos analisar sua situação melhor :)

9

Opa, Marcela. Boa noite…

Encontrou uma solução?

10

@marcela.bafonso3
Nos scripts que rodam na loja, nunca use o inicio “https://{{loja}}.vtexcommercestable.com.br”.
Comece sempre pelo /api. Isso evita o erro de cors.
Outro ponto, NUNCA use appkey/token em javascript. Crie uma middleware, no seu provedor de hospedagem, para isso.
Outro ponto, só use appkey/token em API pvt. API pub não precisa de appkey/token.

2 Likes
11

Achei uma solução!

$.ajax({
      headers: {
        "accept": "application/json",
        "content-type": "application/json",
        "Access-Control-Allow-Origin": "*"
      },
      url: '/api/dataentities/FC/documents',
      type: 'POST',
      dataType: 'json',
      data: JSON.stringify(datos),
      success: function(data) {
        console.log(data);
        $("#formFC").html("<p id='msgSucesso'>Mensagem enviada com sucesso =)</p>");
      },
      error: function(error){
        console.log(error);
      }
    });
12

Olá @fabio.santos tudo bem?

Estou querendo esconder minhas keys do front-end. Como poderia fazer isso? Poderia me ajudar?

13

Só usando uma middleware. Ou seja, um app de backend como php ou node e seja chamado pelo JS.