Почему fetch возвращает 404 при запросах на локальных доменах?

Question

[Lorem Ipsum]

Привет всем! Сделал rest service на Yii2. Когда захожу по url otpg.frontend/project в браузере отображается xml, работает как надо, также проверял через Advance REST service, возвращает json, но когда делаю fetch запрос с react приложения, то возвращает ошибку 404. В чем может быть проблема ? Приложение react запускается на localhost:3000.


{mode: 'no-cors'} установлен, без него отдавал следующую ошибку


То есть в любом варианте ошибка 404

Answer 1

[vadimMalovaniy]

Скорее всего нужен proxy. Я так понимаю ссылки в реакте относительные, а на localhost:3000 работает локальный сервер вебпака, и у него нет того что вы хотите, вот он и выдает 404.

Comments

[Lorem Ipsum]

да, localhost:3000 локальный сервак вэбпака

[Lorem Ipsum]

Вадим, ошибка была в другом, очень стыдно за нее, указал неправильный url (facepalm). Но теперь появилась другая ошибка

[vadimMalovaniy]

Lorem Ipsum, код скинь

[Lorem Ipsum]

vadimMalovaniy, теперь возвращается ошибка сервера 500 internal server error, на стороне сервера надо исправлять, так что буду гуглить
Вот код (на всякий случай):

export default class MapService {

    _apiBase = "http://otgr.frontend";

    getResource = async (url) => {
        const response = await fetch(`${this._apiBase}${url}`);

        if (!response.ok) {
            throw new Error(`Could not fetch ${url}, received ${response.status}`)
        }

        return response.json();
    };

    getProjects = async () => {
        const response = await this.getResource('/project');
        console.log(response);
        //return await response.map(this._transformProject);
    };

    _transformProject = (project) => {
        return {
            id: project.id,
            geom: project.geom,
            name: project.name,
            end_date: project.end_date,
            contractor: project.contractor,
            contract_number: project.contract_number,
            volume: project.volume,
            volume_type: project.volume_type,
            data_path_request: project.data_path_request,
            data_path_response: project.data_path_response,
            passport_path: project.passport_path,
            creation_date: project.creation_date,
            creation_user_id: project.creation_user_id,
            comments: project.comments,
            locality: project.locality
        }
    };
}

[Lorem Ipsum]

[Lorem Ipsum]

Исправил ошибку сервера

код

export default class MapService {

    _apiBase = "http://otgr.frontend";

    getResource = async (url) => {
        const response = await fetch(`${this._apiBase}${url}`, {
            mode: 'no-cors'
        });

        if (!response.ok) {
            throw new Error(`Could not fetch ${url}, received ${response.status}`)
        }

        return response.json();
    };

    getProjects = async () => {
        const response = await this.getResource('/project');
        console.log(response);
        //return await response.map(this._transformProject);
    };

    _transformProject = (project) => {
        return {
            id: project.id,
            geom: project.geom,
            name: project.name,
            end_date: project.end_date,
            contractor: project.contractor,
            contract_number: project.contract_number,
            volume: project.volume,
            volume_type: project.volume_type,
            data_path_request: project.data_path_request,
            data_path_response: project.data_path_response,
            passport_path: project.passport_path,
            creation_date: project.creation_date,
            creation_user_id: project.creation_user_id,
            comments: project.comments,
            locality: project.locality
        }
    };
}

[vadimMalovaniy]

Lorem Ipsum, Попробуй пропиши еще
return await response.json() вместо просто return.

response это всё таки промис.

[Lorem Ipsum]

vadimMalovaniy, спасибо за ответы, но к сожалению не помогло

[vadimMalovaniy]

Lorem Ipsum, во складке Network посмотри что ты отправляешь и что от сервера приходит. Возможно от сервера приходит что то не то. Если нет то прологируй метод getResource.

[Lorem Ipsum]

vadimMalovaniy, В том и дело, что по get запросу на такой же адрес (ogtr.frontend/project) через Advanced Rest Client - все гуд, в браузере тоже все гуд, а в react не работает, вообще я полагаю, что проблема связана с cors

[Lorem Ipsum]

vadimMalovaniy, Решил проблему, нужно в кнотроллере yii добавить заголовки для cors

public function behaviors() {
        return array_merge(parent::behaviors(), [
            'corsFilter'  => [
                'class' => \yii\filters\Cors::className(),
                'cors'  => [
                    'Origin'                           => ['http://localhost:3000'],
                    'Access-Control-Request-Method'    => ['POST', 'GET'],
                    'Access-Control-Allow-Credentials' => true,
                    'Access-Control-Max-Age'           => 3600,
                ],
            ],

        ]);
    }