Ошибка карты кода error networkerror when attempting to fetch resource

Почему периодически возникает ошибка NetworkError when attempting to fetch resource?

Делаю вот такой запрос:

Почему, обычно при первой загрузке, выдает ошибку TypeError: «NetworkError when attempting to fetch resource.» Иногда все нормально и все загружается иногда нет.
Подскажите плиз что это за ошибка, почему она возникает и как ее решить. Заранее спасибо!

• Вопрос задан более двух лет назад
• 6326 просмотров

Простой 18 комментариев

Хотел помочь но прочитав комменты передумал.

Подскажите плиз что это за ошибка, почему она возникает и как ее решить

Виктор Поляков, «Вот как ты думаешь, зачем создали тостер?» — тостер это q&a, то есть сервис вопросов и ответов, что-то типа базы знаний к которой можно обратиться при случае. Не сервис IT помощи для ленивых, а именно база знаний, как stackoverflow

«Мне лично это не помогло» — и как раз суть q&a не в том, чтобы ответы помогали кому-то лично в их конкретных рабочих задачах, а в обмене опытом и знаниями.

В вашем случае мне кажется достаточно очевидно, что если ошибка сетевая, то виновник тут не реакт или js, а кто-то другой — может быть человек который криво написал вам сервис, а может быть кот который играет с проводом питания роутера. Проблема не на вашей стороне короче

Robur, Да я уже получил ответ на свой вопрос. Помогли НОРМАЛЬНЫЕ люди которые умеют нормально объяснять, а главное без закидонов. Что-то там это у Вас, а у меня обычная аллергия на свинское отношение.

Хорошо, приведем пример, Вы задаете вопрос, из обычной жизни. К примеры обращаетесь ко мне и спрашиваете как пройти к такому-то магазину.
Я вместо ответа: ну к магазину можешь пройти по асфальту, который находится на дороге, что тут сложного.
Вы отвечаете, да я понял что по асфальту и по дороге, зачем так отвечать, неужели сложно нормально подсказать.
Я: Ну раз ты не можешь включить свой мозг и посмотреть по навигатору, то это очень печально.
Вы: Да я смотрел, но к сожалению не нашел. Если не хотите помогать то не надо выделываться.

Подходит прохожий: Ну вам же сказали по дороге зачем вы грубите. Что тут не понятного. Теперь я Вам тоже дорогу не покажу.

Я вроде как ответил на вопросы, но само содержание ответа, разве может считаться нормальным??

Если уж проводить аналогию, то правильнее будет так:

Вы обращаетесь к прохожему и спрашиваете как пройти к таком-то магазину.
Прохожий: «Разве вы не видите, вон вывеска, вам через дорогу напротив».
Вы отвечаете: «да ладно?))) Вот ты Америку открыл))) А то я по сторонам не посмотрел сначала? Я что, по твоему слепой, что мне эта вывеска?».
Прохожий: Ну раз вы не можете включить свой мозг и пойти туда где вывеска, то это очень печально.
Вы: «Ну ты и мудила. Пойду поспрашиваю у тех кто нормально ответит!»

и дальше топчитесь на месте, громко возмущаясь, рассказывая всем людям как вам тут нахамили с криками «я не потерплю!» «я недавно здесь» «А вот за границей мне бы вежливо ответили» «да я таких посылать буду сразу же» «ответ — посмотри по сторонам — это не для нашего города!!» и так далее.

Хотя можно было сказать «а, точно, вывеска, вон же он, спасибо» и за 2 минуты попасть куда вам надо.

Виктор Поляков, да какие взгляды — я просто заменил в вашем примере вежливые фразы которых там в оригинале не было на слова которые действительно были в диалоге и комментариях после. Практически скопипастил.

Если вам не нравится как это выглядит со стороны настолько что вы называете это «моим взгялом», ну, дело ваше, вам тоже всего хорошего, и поменьше видеть принижений и издевок вокруг себя.
Больше сил и времени останется на изучение технологий и профессиональный рост.

Прочитал, и еще раз убедился, что рашен-комьюнити недопрограммистов полный отстой, мнят себя божничкой, а сами работают в Залупинске где-нибудь типа IT в отделе. зарплата маленькая, тёлка страшная да и та не дает, квартира в ипотеку, приходится хоть как-то самооценку свою поднимать, только она тут Н@хуй ни кому не интересна.

Если бы такой педик, к которому чел обратился бы за советом, работал в гугле или фейсбуке, а тот бы его послал гуглить, то на хyй бы вылетел с работы на следующий день, потому что, там ценят дух взаимоподдержки и роста для начинающих, и когда к ним обращаются за обычным советом челики уровня 1-2, то более умные стараются максимально помочь, потому что те своим ростом поднимают более умных вверх по карьере.

Но Вам, обезьянкам, (как в Штатах вас называют, «программистов» из России) это не грозит, потому что, таких бакланов как Вы, в комьюнити нормальных пацанов нет и быть не может.

Так что сидеть тут , и писать какие вы охyенные это ваш реальный предел.
Мечтайте в своем забвении, что может кто-то из комьюнити Хабра и подберет вас, на вшивую работенку.

Источник

Ошибка NetworkError when attempting to fetch resource.

Форум ReadyScript Вопросы по работе с системой Ошибка NetworkError when attempting to fetch resource.

Чтобы отправить ответ, вы должны войти или зарегистрироваться

Сообщений [ 6 ]

1 Тема от Александр 26.08.2021 15:10:24

• Александр
• Новый участник
• Неактивен

• Зарегистрирован: 26.08.2021
• Сообщений: 4

Тема: Ошибка NetworkError when attempting to fetch resource.

Установил систему для ознакомления и тестирования на локальном сервере (с доменной зоной .local).
Два дня было все нормально. Все работало без сбоев.
Сейчас при попытке добавить товар в корзину стала появляется ошибка NetworkError when attempting to fetch resource и сайт подвисает.
При попытке перейти в корзину так же появляется эта ошибка.
После перезагрузки локального сервера и обновления страницы показывает, что в корзине есть товары. Но при попытке добавить еще товар происходит то же самое и та же самая ошибка.

2 Ответ от admin 26.08.2021 20:15:24

• admin
• в работе
• Неактивен

• Откуда: Краснодар
• Зарегистрирован: 19.06.2014
• Сообщений: 1,080
• Рейтинг: 146

Re: Ошибка NetworkError when attempting to fetch resource.

Посмотрите, какой статус ответа от запроса на сервер на вкладке Network.
Если 503, то выполните это https://readyscript.ru/faq/#faq-errors и после этого еще раз посмотрите на Response на вкладке Network, там должна быть ошибка в развернутом виде.

На упреждение:
Проверьте значение в phpinfo() — mb_string.func_overload, должно быть = 0
Проверьте, чтобы в mysql был отключен strict mode, т.е. было sql_mode = »[пустые кавычки] в my.cfg

3 Ответ от Александр 26.08.2021 20:57:28

• Александр
• Новый участник
• Неактивен

• Зарегистрирован: 26.08.2021
• Сообщений: 4

Re: Ошибка NetworkError when attempting to fetch resource.

1) Вот с этими пунктами все ОК:

Проверьте значение в phpinfo() — mb_string.func_overload, должно быть = 0
Проверьте, чтобы в mysql был отключен strict mode, т.е. было sql_mode = »[пустые кавычки] в my.cfg

2) Посмотрите, какой статус ответа от запроса на сервер на вкладке Network.

По этому пункту вообще ничего, никаких статусов в ответе нет на вкладке Network. Система (сайт на frontend) пытается добавить товар в корзину и просто зависает. Приходится перезагружать сервер (Openserver).

Два дня было все ок, а потом вот так вот стало. На сервере ничего не перенастраивал.
Только устанавливал модули из магазина приложений. Возможно из-за какого то модуля.
Попробую еще раз выполнить чистую установку системы и потом следить при каждой установке дополнительного модуля, может после установки какого модуля это снова произойдет.

Источник

TypeError: NetworkError when attempting to fetch resource — firefox issue #310

Hi, I have simple function for logout that looks like this

It is workin in chrome but in firefox I get «TypeError: NetworkError when attempting to fetch resource.1 (unknown)». Client side app is on the same server as backend, I’m using https connection with self-signed cert, could it be the issue?

The text was updated successfully, but these errors were encountered:

Firefox contains a native fetch implementation and does not use this polyfill code. You can use the Network tab in Firefox’s web console to debug the request and response.

On chrome, I’ve got «TypeError: Failed to fetch»
On firefox, the same «TypeError: NetworkError when attempting to fetch resource»
..

Have you check errors like CORS?

@ariden83 did you figure out what was causing the errors? I’m seeing the same issues in isolated cases

Can we reopen this ticket?
I’m seeing the same error, but only on Firefox.
Also, nothing shows up in the Network tab.

There maybe relational link.

I’m seeing the same error,except chrome

I have the same exact issue. everything is fine in chrome but firefox caches wrong fetch response. and the worst of all is that it caches this error as response of that particular endpoint of my api for a LONG time.

Having the same issue when I have network.http.referer.XOriginPolicy set to 1 («send a referrer only when the base domains are the same»). Is that supposed to happen? I’m quite sure the base domain of localhost matches the base domain of itself 🙂

I was accessing Function app, via Logic app, when I got the above error.

Following worked for me:

1. Function app > Platform features tab > API > CORS > Allowed Origins > (remove all, Save)
2. Function app > Platform features tab > API > CORS > Allowed Origins > * > Save (that is add * and save)
3. Function app > Overview tab > Restart

Hope that helps.

@manoharreddyporeddy function app > platform features tab etc
what are those?

@aguayUmbt they are menu/sequence of operations to be done in the Azure portal

@jcimoch, I am having the same issue. Please tell me how to debug it. 🙂

For those who are writing Firefox addon, the solution here helped me, I have to add «*://localhost/*»
to permissions key in manifest.json :

Chrome just works without the need to add this permission.

If anyone comes across this, I had the same error in Firefox (but with a different application) and it turns out it was because the (self-signed) SSL certificate I was using on the server was not trusted in Firefox. I added the self-signed root CA to Firefox and all was well.

In our case, the solution was not using the wild card for Access-Control-Allow-Origin on the server side, instead of the wild card, our settings look like this:

Check if you are using http or https on your server. For me, the error was coming online with heroku server because they use https while in local machine I was using http and it was working.
After choosing https on Heroku for my endpoints, it also worked

I managed to solve the problem by monitoring the headers returned by github used on the demo page.
Since I’m using a python webserver, they look something like this:

For me, Swagger UI for some reason crashes when I use examples that consume multilanguage resource files. So I removed the examples from Swagger config and Swager UI started working properly again — of course, without examples.

Tried in a Rails 6 only-api app with CORS enabled, using NGROK and no luck.

and got it working.

Same issue. But what is particular in my situation is that I need to fetch a blob url, like «blob:https://images.google.com.hk/9143673d-b976-4416-b29c-85ce48a77da6».

However, if I declare manifest.json as

Firefox does not recognize it, and throws a warning message, «Reading manifest: Warning processing permissions: Error processing permissions.1: Value «blob:» must either: must either [must either [be one of [«clipboardRead», «clipboardWrite», «geolocation», «idle», «notifications»], be one of [«bookmarks»], be one of [«find»], be one of [«history»], be one of [«menus.overrideContext»], be one of [«search»], be one of [«topSites»], be one of [«activeTab», «tabs», «tabHide»], be one of [«browserSettings»], be one of [«cookies»], be one of [«downloads», «downloads.open»], be one of [«privacy»], be one of [«webNavigation»], or be one of [«webRequest», «webRequestBlocking»]], be one of [«alarms», «mozillaAddons», «storage», «unlimitedStorage»], be one of [«captivePortal»], be one of [«browsingData»], be one of [«devtools»], be one of [«identity»], be one of [«menus», «contextMenus»], be one of [«normandyAddonStudy»], be one of [«pkcs11»], be one of [«geckoProfiler»], be one of [«sessions»], be one of [«urlbar»], be one of [«contextualIdentities»], be one of [«dns»], be one of [«activityLog»], be one of [«management»], be one of [«networkStatus»], be one of [«proxy»], be one of [«nativeMessaging»], be one of [«telemetry»], be one of [«theme»], or match the pattern /^experiments(.w+)+$/], or must either [be one of [«»], must either [match the pattern /^(https?|wss?|file|ftp|*)://(*|*.[^*/]+|[^*/]+)/.$/, or match the pattern /^file:///.$/], or match the pattern /^resource://(*|*.[^*/]+|[^*/]+)/.$|^about:/]»

Maybe the pattern /^(https?|wss?|file|ftp|*)://(*|*.[^*/]+|[^*/]+)/.*$/ can provide some hints, but useless for a blob URL. 😞

I don’t need to declare any permission about blob URL at chrome.

All right, it looks like is the only way.

I had this problem and turned out that someone had put redirection (window.location = ‘/’) not in the promise’s resolve function, but immediately after the fetch call, so the application was aborting the call and redirecting to the index.

© 2023 GitHub, Inc.

You can’t perform that action at this time.

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.

Источник

Same issue. But what is particular in my situation is that I need to fetch a blob url, like «blob:https://images.google.com.hk/9143673d-b976-4416-b29c-85ce48a77da6».

However, if I declare manifest.json as

{
   ...
   "permissions": [
       "blob:*",
    ]
} 

Firefox does not recognize it, and throws a warning message, «Reading manifest: Warning processing permissions: Error processing permissions.1: Value «blob:» must either: must either [must either [be one of [«clipboardRead», «clipboardWrite», «geolocation», «idle», «notifications»], be one of [«bookmarks»], be one of [«find»], be one of [«history»], be one of [«menus.overrideContext»], be one of [«search»], be one of [«topSites»], be one of [«activeTab», «tabs», «tabHide»], be one of [«browserSettings»], be one of [«cookies»], be one of [«downloads», «downloads.open»], be one of [«privacy»], be one of [«webNavigation»], or be one of [«webRequest», «webRequestBlocking»]], be one of [«alarms», «mozillaAddons», «storage», «unlimitedStorage»], be one of [«captivePortal»], be one of [«browsingData»], be one of [«devtools»], be one of [«identity»], be one of [«menus», «contextMenus»], be one of [«normandyAddonStudy»], be one of [«pkcs11»], be one of [«geckoProfiler»], be one of [«sessions»], be one of [«urlbar»], be one of [«contextualIdentities»], be one of [«dns»], be one of [«activityLog»], be one of [«management»], be one of [«networkStatus»], be one of [«proxy»], be one of [«nativeMessaging»], be one of [«telemetry»], be one of [«theme»], or match the pattern /^experiments(.w+)+$/], or must either [be one of [«<all_urls>»], must either [match the pattern /^(https?|wss?|file|ftp|*)://(*|*.[^*/]+|[^*/]+)/.$/, or match the pattern /^file:///.$/], or match the pattern /^resource://(*|*.[^*/]+|[^*/]+)/.$|^about:/]»

Maybe the pattern /^(https?|wss?|file|ftp|*)://(*|*.[^*/]+|[^*/]+)/.*$/ can provide some hints, but useless for a blob URL. 😞

I don’t need to declare any permission about blob URL at chrome.

All right, it looks like <all_urls> is the only way.

I’ve found a lot of question similar to my problem but I don’t get solution that’s why I’ve asked here.

I’ve just started learning front end development using React. I’ve made separate app for front end and backend running at different ports.

Backend : Laravel framework app running at incomeexpense.stacklearning.com/

Frontend : React app running at localhost:3000/

I’ve a form like this:

import React,{Component} from 'react';

export default class Register extends Component{
constructor(props){
    super(props);

    this.state = {
        name: '',
        email: '',
        password: '',
        confirm_password: ''
    }
}

updateInput = (event) =>{
    const name = event.target.name;
    const value = event.target.value;

    this.setState({[name]: value});
}

handleSubmit = (event)=>{
    event.preventDefault();
    fetch('http://incomeexpense.stacklearning.com/api/users', {
        method: 'POST',
        body: JSON.stringify({
            name: this.state.name,
            email: this.state.email,
            password: this.state.password,
            confirm_password: this.state.confirm_password
        }),
        headers: {
            "Content-Type": "application/json",
            "Origin": "localhost:3000",
        }
    }).then(function (response) {
        console.log(response);
    },function (error) {
        console.log(error);
    });
}

render(){
    return(
        <div className="limiter">
            <div className="container-login100">
                <div className="wrap-login100 p-l-85 p-r-85 p-t-55 p-b-55">
                    <form className="login100-form validate-form flex-sb flex-w" onSubmit={this.handleSubmit}>
                        <span className="login100-form-title p-b-32">
                            Sign Up
                        </span>
                        <span className="txt1 p-b-11">
                            Name
                        </span>
                        <div className="wrap-input100 validate-input m-b-36" >
                            <input className="input100" type="text" name="name" value={this.state.name} onChange={this.updateInput}/>
                            <span className="focus-input100"></span>
                        </div>
                        <span className="txt1 p-b-11">
                            Email
                        </span>
                        <div className="wrap-input100 validate-input m-b-36">
                            <input className="input100" type="text" name="email" value={this.state.email} onChange={this.updateInput}/>
                            <span className="focus-input100"></span>
                        </div>
                        <span className="txt1 p-b-11">
                            Password
                        </span>
                        <div className="wrap-input100 validate-input m-b-36">
                            <input className="input100" type="password" name="password" value={this.state.password} onChange={this.updateInput}/>
                            <span className="focus-input100"></span>
                        </div>
                        <span className="txt1 p-b-11">
                            Confirm Password
                        </span>
                        <div className="wrap-input100 validate-input m-b-18">
                            <input className="input100" type="password" name="confirm_password" value={this.state.confirm_password} onChange={this.updateInput}/>
                            <span className="focus-input100"></span>
                        </div>
                        <div className="container-login100-form-btn">
                            <button className="login100-form-btn">
                                Register
                            </button>
                        </div>
                        <div className="flex-sb-m w-full p-b-48 m-t-60 text-center">
                            <label>
                                Already have an account ?
                                <a className="txt3 m-l-5" href="/login">
                                    Sign In Now
                                </a>
                            </label>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    );
}
}

I’ve following routes,

Route::middleware('auth:api')->get('/user', function (Request $request) {
    return $request->user();
});

Route::post('users',array( 'middleware'=>'cors','uses'=>'AuthRegisterController@registerUser'));
Route::get('users',array( 'middleware'=>'cors','uses'=>'AuthRegisterController@getUsers'));

Here is CORS middleware,

<?php

namespace AppHttpMiddleware;

use Closure;

class CORS
{
    /**
     * Handle an incoming request.
     *
     * @param  IlluminateHttpRequest  $request
     * @param  Closure  $next
     * @return mixed
     */
    public function handle($request, Closure $next)
    {
        header('Access-Control-Allow-Origin: http://localhost:3000/');
        header('Access-Control-Allow-Credentials: true');

        // ALLOW OPTIONS METHOD
        $headers = [
            'Access-Control-Allow-Methods'=> 'POST, GET, OPTIONS, PUT, DELETE',
            'Access-Control-Allow-Headers'=> 'Content-Type, X-Auth-Token, Origin'
        ];

        if($request->getMethod() == "OPTIONS") {
            // The client-side application can set only headers allowed in Access-Control-Allow-Headers
            return Response::make('OK', 200, $headers);
        }

        $response = $next($request);
        foreach($headers as $key => $value)
            $response->header($key, $value);

        return $next($request);
    }
}

Finally here is user creating function

protected function create(array $data)
{
    return User::create([
        'name' => $data['name'],
        'email' => $data['email'],
        'password' => bcrypt($data['password']),
    ]);
}

protected function registerUser(Request $request)
{
    $data = $request->all();
    return response()->json($this->create($data));
}

When I send the post request from react app following error is shown at console

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://incomeexpense.stacklearning.com/api/users. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

TypeError: «NetworkError when attempting to fetch resource.» Register.js:39
Cross-Origin Request Blocked:

The Same Origin Policy disallows reading the remote resource at http://incomeexpense.stacklearning.com/api/users. (Reason: CORS request did not succeed).

I know this error is due to different domain and browser prevent resource access to different domain.

I just want to know what I need need to do at front and at back end to make things right

PS: back end code works perfectly while sending request from postman.

Сообщений [ 6 ]