1

Tenho um aplicativo que faz uma requisição de um JSON via axios. Segue a função

axios.get("http://localhost/teste.json")
  .then((res) => {
    this.setState({value: res.data.tgt.screenPosX})
  }).catch((err) => {
    console.log('Error')
})

Porém como o servidor de desenvolvimento esta rodando na 3000 não consigo acessar este json no servidor apache devido a politica CORS

Requisição cross-origin bloqueada: A política de mesma origem (Same Origin Policy) impede a leitura do recurso remoto em http://localhost/teste.json. (Motivo: o cabeçalho CORS 'Access-Control-Allow-Origin' não está presente).

Como posso resolver este problema? Como eu consumo esse JSON sem passar pelo CORS?

Não conheço muito de backend porém preciso resolver pra ontem o problema.

Obrigado desde já!!

4
  • 1
    Você está fazendo requisição pra um servidor que você desenvolveu ? se sim, pode mudar o CORS da aplicação pra aceitar requisições de qualquer domínio.
    – RickPariz
    Commented 10/09/2018 às 18:46
  • Não fui eu quem exatamente desenvolvi, porém está local e tenho acesso a ele. Como posso fazer isso, tenho que permitir o servidor no localhost a aceitar as requisições? Commented 10/09/2018 às 18:53
  • 2
    Qual a linguagem está usando no Back-End? Você tem que configurar o Cors no seu Back End!
    – Marconi
    Commented 10/09/2018 às 18:57
  • O backend ta em php, vou tentar trabalhar nisso e dou feedback pra vocês Commented 10/09/2018 às 19:19

2 Respostas 2

1

Problema resolvido. Adicionei um .htaccess no meu servidor apache permitindo o CORS. Lembrando que estou utilizando apenas para desenvolvimento, provavelmente não é uma alternativa segura.

Segue o conteúdo adicionado no .htaccess

RewriteCond %{REQUEST_METHOD} OPTIONS
RewriteRule ^(.*)$ $1 [L,R=204]

Header set X-Content-Type-Options "nosniff"
Header set X-XSS-Protection "1; mode=block"
   # Always set these headers for CORS.
Header always set Access-Control-Max-Age 1728000
Header always set Access-Control-Allow-Origin: "*"
Header always set Access-Control-Allow-Methods: "GET,POST,OPTIONS,DELETE,PUT"
Header always set Access-Control-Allow-Headers: "DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,C$
Header always set Access-Control-Allow-Credentials true
2
  • se sua API não for pública tem outra forma mais segura de resolver isso, exemplo mandando um header junto na requisição do frontend pra API. Commented 18/11/2019 às 20:11
  • qualquer coisa dependendo da sua resposta eu posto aqui uma possível solução. Commented 18/11/2019 às 20:13
0

Boas amigo

Aconselho-te a dar uma vista de olhos no package CORS: https://www.npmjs.com/package/cors

É talvez das formas mais viáveis de resolver os problemas com CORS.

1
  • Como está escrito atualmente, sua resposta não é clara. Por favor, pode editar para adicionar mais detalhes, que ajudarão outras pessoas a entender como isso resolve a pergunta feita. Você pode encontrar mais informações sobre como escrever boas respostas na Central de Ajuda.
    – Comunidade Bot
    Commented 31/05/2022 às 12:07

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .