[RESOLVIDO] Cors bloqueia minhas requisições feitas pelo localhost criado pela minha Api, como resolver?

Programação Node.js
#1

estou usando um servidor criado pelo webpack e estou tentando fazer uma requisição com o Axios, mas o chrome bloqueia minhas requisições feitas por esse local host. Pesuisei na internet, td mundo fala sobre preencher o cabeçalho, mas niguem informa oque é, onde fica e como preenche esse cabeçalho.

#2

mostra oq vc fez no node

#3 
 const repoIn = this.inputEl.value;
 if (repoIn === 0) {
    return;
 }
 const response = await api.get(`/${repoIn}?tab=repositories`);
 console.log(response)

é ai que está a promisse. o ‘api’ está sendo importado de uma constante onde configurei o Axios

import axios from 'axios';
const api = axios.create({
  baseURL: 'https://github.com/'
})

export default api;
#4

Não, no Node, cadê o código do node

#5

ficou meio bugado, n sei mexer no site direito ksksk

#6

onde eu acho isso? esse trecho retirei do file que estou usando

#7

Quando for postar código, seleciona todo o trecho e clica em </>
image

Ah entendi, é que vc falou no titulo que o cors ta bloquando requisições feitas pela sua API e no código vc botou o Github…

O que vc está fazendo de fato?

#8

eu estou tentando criar um app de busca, que pega o repositório de usuários do github. ai eu to usando o axios pra fazer essa requisição,

import api from './api'

class App {

    constructor() {

        this.repositories = [];

        this.formEl = document.getElementById('repo-form')

        this.repoList = document.getElementById('repo-list')

        this.inputEl = document.getElementById('nome')

        this.registerHandlers();

    }

    registerHandlers() {

        this.formEl.onsubmit = event => this.addRepository(event);

    }

    async addRepository(event) {

        event.preventDefault();

        const repoIn = this.inputEl.value;

        if (repoIn === 0) {

            return;

        }

        const response = await api.get(`/${repoIn}?tab=repositories`);

        console.log(response)

        this.repositories.push({

            name: 'teste.com',

            description: 'teste rodando',

            avatar_url: 'https://www.pngitem.com/pimgs/m/69-697652_image-creative-graphic-designer-logo-hd-png-download.png',

            html_url: 'http://github.com/rocketseat'

        })

        this.render()

    }

    render() {

        this.repoList.innerHTML = '';

        this.repositories.forEach((repo) => {

            let imgEl = document.createElement('img');

            imgEl.setAttribute('src', repo.avatar_url)

            let titleEl = document.createElement('strong');

            titleEl.appendChild(document.createTextNode((repo.name)));

            let descriptionl = document.createElement('p');

            descriptionl.appendChild(document.createTextNode(repo.description));

            let linkEl = document.createElement('a');

            linkEl.setAttribute('href', repo.html_url);

            linkEl.setAttribute('target', 'blank');

            linkEl.appendChild(document.createTextNode('Acessar'));

            let listem = document.createElement('li');

            listem.appendChild(imgEl);

            listem.appendChild(titleEl);

            listem.appendChild(descriptionl);

            listem.appendChild(linkEl);

            this.repoList.appendChild(listem);

            console.log(this.repoList);

        })

    }

}

new App();
#9

Aproveita e coloca o erro também

#10

localhost/:1 Access to XMLHttpRequest at ‘https://github.com/?tab=repositories’ from origin ‘http://localhost:8080’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested rTexto pré-formatadoesource.

#11

Cara, eu acredito que vc nao ta passando o usuário. Até pq esse link: github.com/?tab=repositories requer um login.

Experimenta passar o usuário de alguém antes, eu testei no insominia e deu certo:

https://github.com/kingaspx/?tab=repositories.

#12

é uma template literals, /${usuario}?tab=repositories, redireciona a um perfil público do git hub. quando tento fazer a requisição com o axios fora do servidor local, o código roda, mas quando eu tento pelo localhost, o browser não me deixa executar, por causa de uma medida de segurança “CORS policy”, que bloqueia requisições cross-origin.

#13

Cara, é exatamente o que eu tava pensando, essa url ta errada…

Tenta essa:

https://api.github.com/users/kingaspx/repos

essa aqui ta certa, eu testei aqui e funcionou

image
image.png786×150 8.39 KB

1 curtida
#14

Tentei adicionar os headers mas mesmo assim nao tive sucesso, apenas trocando a URL.

Pra adicionar header no axios:

    const headers = {
        'Content-Type': 'text/plain'
    };

    await axios.post(
        'http://site.comm.br/login',
        {headers}
        ).then(response => {
            console.log("Deu certo :D, ", response);
        })
        .catch(error => {
            console.log("Não deu certo... ", error);
        }
    )
1 curtida
#15

ta rodandooo, obrigado. mds eu fiquei até 4 da manhã tentando resolver ksksk

1 curtida