Executando verificação de segurança...
1
terciogabriel
1 min de leitura ·

Erro no AXIOS no deploy

Galera queria saber porque meu site em deploy só funciona se eu estiver com o server local ligado no vscode (npm run server). e tento usar o deploy da esse erro:
To com esse codigo do axios

import axios from "axios"

export const server = axios.create({
  baseURL: "http://localhost:3333",
})

Mas quando eu fecho o server local o site em deploy no vercel tem esse erro no console:

index-2ac0d6bd.js:3 GET http://localhost:3333/summary/hqNfilpIAeg net::ERR_CONNECTION_REFUSED
(anonymous) @ index-2ac0d6bd.js:3
xhr @ index-2ac0d6bd.js:3
de @ index-2ac0d6bd.js:3
request @ index-2ac0d6bd.js:3
H. @ index-2ac0d6bd.js:3
(anonymous) @ index-2ac0d6bd.js:1
(anonymous) @ index-2ac0d6bd.js:3
index-2ac0d6bd.js:3 Uncaught (in promise) m {message: 'Network Error', name: 'AxiosError', code: 'ERR_NETWORK', config: {…}, request: XMLHttpRequest, …}

Obs: É uma aplicação q baixa videos shorts, converte pra texto e faz um resumo do assunto principal com uma IA no javascript...

Carregando publicação patrocinada...
1
eliaseas

Seu site ta apontando para o localhost ao invés do endereço correto para o vercel.

seu codigo tem que de alguma forma receber uma variavel ambiente com o endereço do backend.

1
dopplerpng
const <url da API> = process.env.URLDAAPI  
import axios from "axios"

export const server = axios.create({
  baseURL:  `${<url da API>}`,
})

Se você estiver usando um back-end próprio, vc terá que colocar o back-end em produção (Deploy) e usar o endereço do back-end (www.seilaoq.com/api/v1/getAlgumaCoisa por ex) no baseURL. Lembrando: você deve se atentar na configuração do CORS, para que não ocorra nenhuma erro na requisição. O Cors é como se fosse a alfandega e seu back-end o aeroporto. O Cors vai controlar para quem o seu back-end vai enviar os dados solicitados, se a solicitação vier de uma URL não configurada no seu Cors, o seu back-end não irá enviar o dado solicitado.

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

1
DanielZtimhcs

No seu projeto, você tem que ter a possibilidade de "trocar" o seu endereço do baseURL

isso é feito utilizando um conceito chamado "Variáveis de ambiente" em ingles Environment

Vou te dar um exemplo: Em um projeto meu aqui, eu tenho um arquivo ".env" na raiz do projeto com o seguinte conteúdo:

VITE_HTTP_SERVER = http://localhost:3000/

O meu axios é assim:

const HttpService = axios.create({
  baseURL: import.meta.env.VITE_HTTP_SERVER,
  timeout: 10000,
  headers: { 'Content-Type': 'application/json' }
})

Aquele import.meta ali é apenas uma característica do meu builder, o vite. Eu não sei o que você está usando aí! Eu alguns casos vc pode usar "process.env.HTTP_SERVER" por exemplo....

No modo de desenvolvimento, ele vai ler o .env e usar o localhost.

Já no modo de produção, depende de cada servidor que você usar. Geralmente cada servidor tem uma área chamada "Environment", um exemplo meu aqui do render.com:

Se você ainda tiver dúvidas, fala aí! Publicar o projeto no github tb ajuda a te ajudar melhor.

1
terciogabriel
Autor
Autor

mano, eu nn tava fzd isso o .env e tals mas fiz e agr o site nem carrega os arquivos js, ta o html puro agr. Link: https://github.com/tercioo-gabriel/shorts-summary só nn ta com as modificações do env salvas porq como meu site nem carrega mais, nn vou commitar isso não kkkk

//env

BACKEND_URL=http://localhost:3333/

//server.js

import axios from "axios";

require("dotenv").config()

export const server = axios.create({
  baseURL: process.env.BACKEND_URL,
  timeout: 10000,
  headers: { "Content-Type": "application/json" },
})

//index.js (vou por so a parte do listen)

app.listen(3333, () => console.log("Server is running on port 3333"))

tentei de diversas maneiras, mas ta dificil kkk me adiciona discord FlaShiin#0605

0
1
terciogabriel
Autor
Autor

mano, eu tentei bastante e até q consegui. Porém o deploy nn vai ser possivel porq o projeto é pesadinho, 1gb. Ai to mandando o back e front separados pra conseguir pegar o link url do deploy do back e usar no front pra nn ter a necessidade do .env, porq nn tava funcionando quando usava o .env