Invalid json response как исправить

Were you trying to upload a file or edit a piece of content on your WordPress site only to be met by a scary red message saying something like, “Updating failed. The response is not a valid JSON response?”

The WordPress invalid JSON response error happens in the new Block Editor (AKA Gutenberg) when something goes wrong on your site. Because it appears when you’re working on content, it can be a frustrating error because it can get in the way of whatever task you’re trying to accomplish.

Thankfully, there are some straightforward steps that you can take to fix this problem and get your site working properly again.

In this post, we’ll briefly explain what the invalid JSON response error means. Then, we’ll share a number of troubleshooting steps you can implement to fix the problem.

If you see “Updating failed. The response is not a valid JSON response,” it will typically appear when you’re working on content in the WordPress Block Editor. In some cases, it can also appear when you’re trying to upload a media file to your site, especially if you’re trying to upload the file directly to a block in the Block Editor.

So, why does it happen?

When you’re working in the Block Editor, the editor is in constant communication with your WordPress site’s server. This “communication” happens behind the scenes, but it’s important to the editor.

One of the “languages” of this communication is JSON, short for JavaScript Object Notation. If something goes wrong with this communication, WordPress will show the “The response is not a valid JSON response” message. It means that the editor failed to get a response to the server or the response wasn’t in a valid JSON format.

Basically, if the editor can’t communicate with the server, it will show this error message instead.

To fix the problem, you essentially need to fix whatever is getting in the way of the communication.

How to Fix the WordPress Invalid JSON Response Error

Now that you know what the JSON response error message means, let’s dig into some troubleshooting steps to fix this problem.

We’ll try to put these in a logical order, so that the first troubleshooting steps are the most likely to fix the problem.

For that reason, we recommend trying these processes in the order that we’ve written them.

Fix your site’s permalinks and .htaccess file.

One of the most common causes of the invalid JSON response error is an issue with your site’s .htaccess file and/or WordPress permalinks.

Thankfully, this is also one of the simplest debugging steps. Here’s all you need to do:

1. Go to Settings → Permalinks in your WordPress dashboard.
2. Verify that the correct permalink structure is selected — If the correct structure is already selected, you don’t need to change anything.
3. Click the Save Changes button. Even if you didn’t change anything, you should still click the save changes button because it will force WordPress to regenerate its rewrite rules.

Now, go back to the editor and see if that fixed the invalid JSON response error.

If you’re still experiencing issues, you can guarantee that your .htaccess file is clean by deleting it and forcing WordPress to generate a new one. Here’s how:

1. Connect to your server using an FTP client or cPanel File Manager.
2. Find your .htaccess file (it should be in the root folder).
3. Download a copy of the file to your computer as a backup (just in case).
4. Delete the file from your server.
5. Go to Settings → Permalinks in your WordPress dashboard and click Save Changes. This will force WordPress to generate a new, clean .htaccess file.
6. Check if the problem is fixed.

Finally, there’s one last potential fix, but it really only applies to advanced WordPress users.

If you’re working in a local development environment via a tool such as XAMPP, you’ll also want to make sure that you’ve properly configured the .htaccess file permissions and enabled mod_rewrite in Apache’s settings. Make sure to restart Apache once you’ve made the changes.

Check your WordPress site URL.

Another common cause of the invalid JSON response error is a problem with your WordPress site URLs.

The problem can arise if your site URLs aren’t correct or if you accidentally put HTTP instead of HTTPS (assuming your site is using an SSL certificate).

To fix this problem, go to Settings → General in your WordPress dashboard.

You’ll want to verify two things here:

1. Make sure that the URLs are correct. On the vast majority of WordPress sites, your WordPress Address and Site Address should be the same.
2. Make sure that both URLs start with https if you’re using an SSL certificate on your site.

Then, save your changes.

In very rare cases, your site’s URLs might have been hard-coded into your wp-config.php file. If this is so, any changes that you make via your WordPress dashboard won’t apply because those hard-coded changes will override the dashboard settings.

Again, this is very rare because you need to manually add those hard-coded changes, but it can happen so it might be worth checking. For example, your WordPress developer might have done this for you without letting you know.

Here’s how to check if this is the case:

1. Connect to your site’s server using FTP or cPanel File Manager.
2. Edit the wp-config.php file.
3. Search for define( ‘WP_HOME’ OR define( ‘WP_SITEURL’

Here’s an example of what it might look like:

If you do find these code snippets, you can either:

1. Verify that both site URLs are correct and leave the code snippets in your wp-config.php file.
2. Remove the code snippets, which will tell your site to use the URLs that you set in your WordPress dashboard.

Check for a mixed content warning (HTTPS issue).

If your site is using an SSL certificate (which most sites do nowadays), issues with mixed HTTP and HTTPS content can trigger the invalid JSON response error.

In order for your website to benefit from the security of your SSL certificate, you need to use HTTPS to load every resource on your site. If you still have some resources loading over HTTP, this can trigger something called a mixed content warning and which causes problems with the invalid JSON response error.

In the previous section, you made sure that your WordPress site URLs both start with HTTPS (if you’re using an SSL certificate), which should fix many problems with mixed content already.

However, there could still be issues, especially if you’re using a plugin to handle migrating an older site from HTTP to HTTPS.

If you’re using a plugin, make sure that you’ve fully enabled its mixed content fixer features. You can do this by going to Settings → SSL and enabling both the Mixed content fixer and the Fire mixed content fixer with different method toggles:

If you’re not using an SSL plugin, many hosts now offer tools to force HTTPS, which you can find in your hosting dashboard or by consulting your host’s documentation.

Finally, if you’re using Cloudflare on your site, make sure that you’ve set its Encryption Mode to Full (Strict) or Full. Try the Strict option first and then switch to just Full if you experience any issues.

Disable your security firewall.

If you use a firewall to protect your WordPress site, this can sometimes interfere with the editor’s connection to your server and trigger the invalid JSON response error.

This is especially common with ModSecurity rules from your web host, though it also might be triggered by popular security plugins.

To troubleshoot this, try deactivating your firewall or security plugin and see if that fixes the problem. If the editor starts working, you know that something is going wrong with your firewall.

Of course, leaving the firewall disabled isn’t a viable long-term strategy, but you at least now know what’s causing the problem and you can start fixing things.

If your firewall is implemented at the hosting level, you can ask your WordPress host to investigate and whitelist the editor to avoid having it trigger the firewall. That way, you can maintain the protection of your site’s firewall while still avoiding the invalid JSON response error.

If you’re using a WordPress security or firewall plugin, you have two options:

1. You can replace your existing firewall plugin with a different plugin that protects your site without causing problems.
2. You can reach out to the plugin’s developer to ask them about whitelisting to avoid future problems.

If you’re using Wordfence (or another plugin that has a “learning mode”), you can also try reactivating learning mode to reset its firewall rules.

Use a classic editor plugin.

Some people report being able to fix the invalid JSON response error by activating and deactivating the Classic Editor (WordPress’ old, TinyMCE-based editor).

It only takes a couple of minutes, so it’s worth seeing if this trick can fix your problems.

Here’s all you need to do:

1. Install the official Classic Editor plugin from WordPress.org.
2. Go to Settings → Writing and use the drop-down to select the Classic Editor as the default editor for all users.
3. Save your changes.
4. Use the same drop-down to change the default editor back to the Block Editor.
5. Save your changes again.

Now, try creating or editing a new post and see if it works.

Deactivate your WordPress plugins.

Debugging WordPress errors can be tricky because the plugins that you’re using introduce a lot of variables to the equation. With 58,000+ plugins at WordPress.org, that’s a lot of edge cases that could be triggering the invalid JSON response error.

One easy way to figure out if a plugin is causing the problem is to deactivate all of your plugins.

If you’re still seeing the invalid JSON response error after deactivating everything, you can be confident that it’s not an issue with your plugins and you can reactivate them.

On the other hand, if the error goes away after deactivating your plugins, you know that there’s a problem with one of the plugins that you’re using.

To find the problematic plugin, you can reactivate your plugins one by one, making sure to test the editor after each plugin. If you activate a plugin and see the error appear right after that, you’ve found the issue.

From there, you can either replace that plugin with an alternative that doesn’t cause a problem or you can reach out to the plugin’s developer for help and a potential fix.

Upload media files via the Media Library.

If you’re seeing the “The response is not a valid JSON response” when you try to upload media files via the Block Editor, one fix is to upload these images directly to your Media Library instead of via the block interface.

When you add an image block (or the block for another type of media file), click on the Media Library option and upload files that way instead of just clicking the Upload button.

When you do that, you’ll see the regular WordPress Media Library uploader interface, which should let you bypass the invalid JSON response error.

Check the console and debug log.

For more advanced users, you can try digging into your browser’s console or various debug logs to find a more specific problem. This isn’t really a solution for casual users, though, as you’ll need some technical knowledge to accomplish anything here.

First off, you can use the Network tab in Chrome Developer Tools to find issues with Ajax calls.

In the Network tool, select FETCH/XHR to filter out Ajax calls and debug issues with the REST API.

You can also view some REST API issues from your WordPress dashboard. Go to Tools → Site Health and look for a heading such as “The REST API encountered an unexpected result”.

Use the Classic Editor as a short-term fix.

This last method isn’t a permanent fix, but it is a workaround that can help you publish content in a pinch.

Earlier, we told you about the Classic Editor trick where you switch your site to the Classic Editor but then switch back to the Block Editor.

Well, if none of the other tips have worked for you, one way to continue publishing content is to just leave the Classic Editor enabled and use that to create content for the time being.

This isn’t an actual “fix” because you’ll lose all of the functionality that the Block Editor adds. However, it will give you the ability to work on content while you continue debugging the “The response is not a valid JSON response” message.

Additionally, once you get the Block Editor working again, you’ll be able to convert your Classic Editor content into blocks with just a few clicks.

Fixing the WordPress Invalid JSON Response Error

Seeing a “Updating failed. The response is not a valid JSON response” message can be frustrating because it appears while you’re trying to work in the WordPress editor.

Thankfully, for most sites, debugging this error shouldn’t be too painful.

In most situations, simply re-saving your WordPress permalinks should fix the problem. If that doesn’t work, you might need to dig into other fixes such as checking your site URLs, fixing mixed content warnings with HTTPS, adjusting your firewall, and more. Implement these troubleshooting steps and you should have your site functioning properly again in no time.

помогите решить ошибку

DataTables warning: table id=dataTable - Invalid JSON response

Создал форму в которую заполняются данные для отправки в бд и поле для редактирования данных. Есть файл api.php где сам находится код. Я посмотрел, все переменные правильно названы, через браузер режим откладки тоже посмотрел и в откладке пишет

URL-адрес запроса: http://////api.php?_=1657084708240
Метод запроса: GET
Код состояния: 200 OK
Удаленный адрес: 10.1.212.50:33085
Политика источника ссылки: strict-origin-when-cross-origin

В чем может быть проблема? Еще такой момент если код вставить в functions.php (wordpress) то код отработает, но не покажет HTML форму и отправит в бд пустые данные
php код

$servername = "localhost";
$username = "";
$password = "";
$dbname = "";
$tablename = "mytable";
 $conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}
 $requestType = $_SERVER["REQUEST_METHOD"];
//Create
if($requestType == "POST"){
    $name = $_POST['name'];
        $date = $_POST['date'];
    $insertQuery = "INSERT INTO mytable (name, date) VALUES ('$name','$date');";
    if ($conn->query($insertQuery) === TRUE) echo "Новая Запись Успешно Добавлена.";
    else echo "Error: " . $insertQuery . "<br>" . $conn->error;
}
//Read
if($requestType == "GET" AND !isset($_GET["id"])){
    $selectQuery = "SELECT * FROM mytable";
    $result = $conn->query($selectQuery);
    $rows = array();
    while($row = $result->fetch_assoc())
        $rows[] = $row;
    header("Content-Type: application/json");
    echo json_encode($rows);
}
//Read Only One
if($requestType == "GET" AND isset($_GET["id"])){
    $id = $_GET["id"];
    $selectQuery = "SELECT * FROM mytable WHERE id = $id";
    $result = $conn->query($selectQuery);
    $rows = array();
    if ($result->num_rows > 0){
        while($row = $result->fetch_assoc())
            $rows[] = $row;
        header("Content-Type: application/json");
        echo json_encode($rows);
    }
    else echo "Not Found.";
}
//Update
if($requestType == "PUT"){
    $str = file_get_contents("php://input");
    $_PUT = array();
    parse_str($str, $_PUT);
    $name = $_PUT['name'];
        $date = $_PUT['date'];
        $id = $_PUT['id'];
    $updateQuery = "UPDATE mytable SET name = '$name', date = '$date' WHERE id = $id;";
    if ($conn->query($updateQuery) === TRUE) echo "Успешно обновлено.";
    else echo "Error: " . $updateQuery . "<br>" . $conn->error;
}
//Delete
if($requestType == "DELETE"){
    $str = file_get_contents("php://input");
    $_DELETE = array();
    parse_str($str, $_DELETE);
    $id = $_DELETE['id'];
    $deleteQuery = "DELETE FROM mytable WHERE id = $id";
    if ($conn->query($deleteQuery) === TRUE) echo "Запись Успешно Удалена.";
    else echo "Error: " . $deleteQuery . "<br>" . $conn->error;
}

HTML форма с которой идет добавление и редактирование данных из бд

# BEGIN WordPress

RewriteEngine On
RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
RewriteBase /
RewriteRule ^index.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]

# END WordPress

define( 'WP_DEBUG', true );
define( 'WP_DEBUG_LOG', true );

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us.

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience building WordPress websites. We have been creating WordPress tutorials since 2009, and WPBeginner has become the largest free WordPress resource site in the industry.

A warning from DataTables stating “Invalid JSON response” is one of the most common errors that can occur with DataTables. Fortunately it is fairly easy to diagnose what is going wrong, with the developer tools built into modern web-browsers. This guide shows exactly what the error means, how to diagnose the issue and how to resolve it.

Meaning

When loading data by Ajax (ajax), DataTables by default, expects the data loaded to be valid JSON. JSON is a data-interchange format that has provide to be extremely populate on the web, due to its compatibility with Javascript, its ease of use and the fact that it is easily human readable. However, like all data-interchange formats, it has strict rules about what is valid JSON. Anything that does not meet this criterion is invalid JSON, and will throw an error in DataTables where it expects JSON.

When DataTables shows the message:

DataTables warning: table id={id} – Invalid JSON response.

it means exactly what it says. DataTables made an Ajax response to the server for JSON data, but the data that it received back was not valid JSON.

Diagnosis

If the server didn’t reply to the Ajax request with valid JSON data, we need to know what it did reply with, so we can take corrective action. Typically, the response will consist of an error message from the program on the server which is being used to create the JSON, which will be the starting point for resolving the issue fully.

Server data

Modern browsers all come with built in developer tools, which can be used to find out what data the server is responding to the DataTables Ajax request with. Instructions on how to do this with your browser are shown below.

Safari

1. By default Safari hides its built-in developer tools. If you don’t have a Develop menu shown in Safari it needs to be enabled. If you do, jump to step 3.
   • Open the Safari menu and select Preferences…
2. Enable the developer menu in the Advanced tab
   • Click the Advanced tab in the Preferences window
   • Check the box for Show Develop menu in menu bar option
   • Close the preferences – the Develop menu will now be shown
3. View the resources the page has loaded
   • Select the Show Page Resources option from the Develop menu.
   • The developer console will show at the bottom of the page
   • Reload the page so Safari can capture all network requests
4. Details about the Ajax request are shown.
   • Safari will show a list of all resources (images, scripts etc) which have been loaded for the page. Locate the Ajax request that has been made to the server and click it. Safari will show detailed information about the request.
   • Note that on pages with a large number of resources, Safari will group the resources by type into folders. If this happens on your site, look for the “XHRs” folder for the Ajax requests.

Please note that these instructions were written with Safari 7 as the version used. Newer versions might have slightly different steps.

Chrome

1. To access the developer tools in Chrome:
   • Mac: Access the View > Developer > Developer Tools menu option.
   • Windows: Click the Chrome menu (to the right of the address bar) and select Tools > Developer Tools.
2. The Developer tools are shown at the bottom of the current browser window. Chrome will show the Javascript console by default.
   • Click on the Network tab to view network requests
   • Refresh the page to allow Chrome to capture all requests
3. The network panel will show all of the requests made by Chrome to load the page.
   • Click the XHR option at the bottom of the window to reduce the requests to just the Ajax (XHR) requests.
   • Double click the Ajax request made by DataTables
4. Details about the Ajax request are shown.
   • Click the Response tab in the Ajax view to see the exact data that was returned from the server. This is what we are interested in!

Please note that these instructions were written with Chrome 31 Mac as the version used. Newer versions, or those on different platforms might have slightly different steps.

Firefox

1. To access the developer tools in Firefox:
   • Mac: Access the Tools > Web Developer > Network menu option.
   • Windows: Click the Firefox menu (top left of the window) and select Web Developer Network option.
2. The Developer tools are shown at the bottom of the current browser window.
   • Refresh the page to allow Firefox to capture all requests
3. The network panel will show all of the requests made by Firefox to load the page.
   • Click the XHR option at the bottom of the window to reduce the requests to just the Ajax (XHR) requests.
   • Double click the Ajax request made by DataTables
4. Details about the Ajax request are shown.
   • Click the Reponse tab in the Ajax view to see the exact data that was returned from the server. This is what we are interested in!

Please note that these instructions were written with Firefox 26 Windows as the version used. Newer versions, or those on different platforms might have slightly different steps.

IE

1. To access the developer tools in IE:
   • Press F12 or,
   • Click the tools menu (top right, a cog icon) and select the F12 developer tools option.
2. The Developer tools are shown at the bottom of the current browser window. IE will show the document tree by default.
   • Click on the Network tab to view network requests
3. IE requires that network traffic be specifically tracked, which we want here.
   • Click the Start capturing button to capture network requests
   • Refresh the page to allow IE to capture all requests
4. The network panel will show all of the requests made by IE to load the page.
   • Double click the Ajax request made by DataTables – it will likely be at or near the bottom of the request list
5. Details about the Ajax request are shown.
   • Click the Reponse body tab in the Ajax view to see the exact data that was returned from the server. This is what we are interested in!

Please note that these instructions were written with IE 10 as the version used. Newer versions might have slightly different steps.

Opera

1. To access the developer tools in Opera:
   • Mac: Right click or ctrl click the document and select the Inspect element option.
   • Windows: Right click the document and select the Inspect element option.
2. The Developer tools are shown at the bottom of the current browser window. Opera will show information about the element that was clicked on.
   • Click on the Network tab to view network requests
   • Refresh the page to allow Opera to capture all requests
3. The network panel will show all of the requests made by Opera to load the page.
   • Click the XHR option at the bottom of the window to reduce the requests to just the Ajax (XHR) requests.
   • Double click the Ajax request made by DataTables
4. Details about the Ajax request are shown.
   • Click the Reponse tab in the Ajax view to see the exact data that was returned from the server. This is what we are interested in!

Please note that these instructions were written with Opera 18 Mac as the version used. Newer versions, or those on different platforms might have slightly different steps.

JSON validation

Once you have the Ajax data response from the server, you can validate the JSON using a tool such as JSON Lint or JSON Parser. Often the error in the JSON response from the server will be very obvious, but a JSON Linter can provide to be very useful for resolve the less obvious issues, such as trailing commas.

Resolution

Once you have followed the instructions above to find out what the data from the server actually is, since it is not JSON, you will be able to modify the data, or the program that creates the data, to return valid JSON only.

I had already install npm before, but somehow I had to uninstall it for some reason.
Now, i tried to install npm again to create react app with this command.

npx create-react-app ip_tracker

On a halfway installation I found this error

npm ERR! code FETCH_ERROR
npm ERR! errno FETCH_ERROR
npm ERR! invalid json response body at https://registry.npmjs.org/@babel%2fpreset-react reason: Unexpected end of JSON input

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/ngebelcilik/.npm/_logs/2020-11-27T14_34_28_241Z-debug.log

Here’s the logs

0 verbose cli [
0 verbose cli   '/usr/bin/node',
0 verbose cli   '/usr/share/nodejs/npm/bin/npm-cli.js',
0 verbose cli   'exec',
0 verbose cli   '--',
0 verbose cli   'create-react-app',
0 verbose cli   'ip_tracker'
0 verbose cli ]
1 info using npm@7.0.11
2 info using node@v12.19.0
3 timing config:load:defaults Completed in 7ms
4 timing config:load:file:/usr/share/nodejs/npm/npmrc Completed in 10ms
5 timing config:load:builtin Completed in 10ms
6 timing config:load:cli Completed in 8ms
7 timing config:load:env Completed in 3ms
8 timing config:load:project Completed in 4ms
9 timing config:load:file:/home/ngebelcilik/.npmrc Completed in 1ms
10 timing config:load:user Completed in 1ms
11 timing config:load:file:/etc/npmrc Completed in 1ms
12 timing config:load:global Completed in 1ms
13 timing config:load:cafile Completed in 1ms
14 timing config:load:validate Completed in 1ms
15 timing config:load:setUserAgent Completed in 2ms
16 timing config:load:setEnvs Completed in 4ms
17 timing config:load Completed in 44ms
18 verbose npm-session 9047ea92ff92abbf
19 timing npm:load Completed in 86ms
20 http fetch GET 200 https://registry.npmjs.org/create-react-app 835ms
21 timing arborist:ctor Completed in 4ms
22 timing arborist:ctor Completed in 1ms
23 timing arborist:ctor Completed in 1ms
24 timing command:exec Completed in 416430ms
25 verbose stack Error: command failed
25 verbose stack     at ChildProcess.<anonymous> (/usr/share/nodejs/npm/node_modules/@npmcli/promise-spawn/index.js:64:27)
25 verbose stack     at ChildProcess.emit (events.js:314:20)
25 verbose stack     at maybeClose (internal/child_process.js:1021:16)
25 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:286:5)
26 verbose cwd /home/ngebelcilik
27 verbose Linux 5.4.0-51-generic
28 verbose argv "/usr/bin/node" "/usr/share/nodejs/npm/bin/npm-cli.js" "exec" "--" "create-react-app" "ip_tracker"
29 verbose node v12.19.0
30 verbose npm  v7.0.11
31 error code 1
32 error path /home/ngebelcilik
33 error command failed
34 error command sh -c create-react-app ip_tracker
35 verbose exit 1

I already doing research on this error, it’s similiar with this problem, but this problem happened everytime I install any npm packages (not just react).