Блог

Главная - Вопросы по программированию - React API выборки Докер — сеть::ИМЯ ОШИБКИ НЕ РАЗРЕШЕНО на определенной странице

React API выборки Докер — сеть::ИМЯ ОШИБКИ НЕ РАЗРЕШЕНО на определенной странице

#reactjs #docker #next.js

Вопрос:

Я использую Next.js для кода реакции и докера. Я использую имя и порт службы Docker для извлечения данных с помощью API выборки, и он работает на некоторых страницах, где я использую GET. Но теперь я пытаюсь ОПУБЛИКОВАТЬ и получаю POST http://nginx:8080/api/register net::ERR_NAME_NOT_RESOLVED .

Это рабочая ListItems.jsx страница, на которой я использую fetch:

 function Items({ data }) {
  return (
    <div>
        {console.log(data)} // this works
    </div>
  )

}
    
export async function getServerSideProps() {
  const res = await fetch('http://nginx:8080/api/items', {
    method: 'GET',
  })  
  const { data } = await res.json()
  return { props: { data } };
}

export default Items

И это Register.jsx страница, на которой я получаю net::ERR_NAME_NOT_RESOLVED :

 export default function Register() {
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');

const handleSubmit = (evt) => {
    evt.preventDefault();
    async function postData(url = '', data = {}) {
        const response = await fetch(url, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
        });
        return response.json();
    }
    postData('http://nginx:8080/api/register', { email: email, password: password })
        .then(data => {
            console.log(data);
        })
        .catch(error => {
            console.error('There has been a problem with your fetch operation:', data);
        })
}


    return (
        <div>
            // form template here
        </div>
    )
}

Изменить: соответствующие части docker-compose.yml и Dockerfiles :

docker-compose.yml :

 services:
    nginx:
        image: nginx:stable-alpine
        container_name: nginx
        ports:
            - "8088:8088"
            - "80:80"  
        networks:
            - mynetwork   

    node:
        build:
            context: ./nextjs
            dockerfile: Dockerfile
        container_name: nextjs        
        volumes:
            - ./nextjs:/var/www/html                
        ports:
            - "3000:3000"      
        networks:
            - mynetwork

Комментарии:

1. Возможно, будет сложно отладить без дополнительной информации, можете ли вы поделиться настройками docker, такими как файлы Dockerfiles и/или файлы компоновки?

2. Я думаю, что знаю, почему это не работает: в первом примере, где это работает, я использую рендеринг на стороне сервера (на Next.js, getServerSideProps делается на стороне сервера, если я правильно понимаю) и, следовательно, он знает об nginx имени. Но с помощью fetch API это делается на стороне браузера, поэтому он не знает имен серверов/докеров, и мне приходится использовать фактическую конечную точку API, которая является доменным именем. В моем случае localhost:8080, а не nginx:8080, верно? (Я добавил соответствующие части docker-compose.yml , дайте мне знать, если вам понадобится что-нибудь еще

3. я сталкиваюсь с той же проблемой, не могли бы вы показать мне, как вы добавили пути в свой docker-compose.yml?

Метки: