As an experienced website operations expert, I am well aware of the great inconvenience it can cause in daily work when a certain feature of the website suddenly malfunctions, especially when it involves critical user interaction points.The captcha acts as the first line of defense for website security, and its JavaScript code reporting an error in the browser often means that users are unable to submit forms normally, directly affecting user experience and business processes.Faced with the JavaScript error of AnQiCMS captcha, we need not be慌张, as long as we master a systematic debugging method, we can unravel the problem and find the root cause.

Next, I will guide everyone step by step to troubleshoot the problem, ensuring that even operation personnel without deep front-end development experience can easily get started.

First step: Open the browser console to locate the error information

When the captcha JavaScript errors, your browser console (usually you can open it by pressing F12) is your 'front line battlefield'.Here will be detailed records of all front-end runtime errors.

  1. Switch to the “Console” (Console) tab:Please carefully check for any red error messages. These errors will usually tell you the type of error (for example:Uncaught TypeError/ReferenceError) as well as the specific file and line number where the error occurred. This is the most direct clue.
  2. Switch to the “Network” (English) tab:The loading of captcha usually involves requesting images or data from the server. On this panel, you can see all the network requests made by browsers to the server.
    • Search/api/captchaRequest:According to AnQiCMS documentation, the captcha API interface is usually/api/captcha. You need to find this request here.
    • Check the request status:See what its status code is.
      • 200 OK：indicates that the request was successful, and the server returned data. At this point, you need to further check the 'Response' (response) tab to confirm whether the returned data format is correct and whether it containscaptcha_idandcaptcha(May be an image Base64 encoding or image URL).If the data format is incorrect, or the missing key fields, the problem may lie in the backend configuration or data generation of AnQiCMS.
      • 404 Not FoundThis indicates that the requested resource does not exist. This may mean that the URL is spelled incorrectly, or the server has not been configured with the correct routing rules.
      • 500 Internal Server ErrorThis indicates an internal server error. This is usually due to an exception in the backend program, and you need to check the server-side runtime logs of AnQiCMS.
      • Other like403 Forbidden/401 Unauthorizedmean that there is a permission issue.
    • Check request parameters:Confirm that the request headers (Headers) and request data (Payload) are as expected.
  3. Switch to the “Sources”（Sources）tab:Here, you can find the loaded JavaScript files.If the error message points to a specific JS file and line number, you can set a breakpoint here and step through the code one by one, observe the value of variables, and thus accurately locate the logical errors in the code.

Step 2: Check the HTML structure and element ID of the captcha

JavaScript code is usually manipulated on HTML elements on the page by ID or class name.A small spelling error can cause the code to fail to find the target element and report an error.

  1. Comparetag-/anqiapi-other/167.htmlwith the HTML structure:Carefully check the HTML code related to the captcha in your template, whether it is consistent with the example in the document. The document clearly mentionedcaptcha_id(used for hidden field) andget-captcha(For captcha image) These two IDs.
    • For example, the captcha image element should haveid="get-captcha".
    • The hidden input box used to store the captcha ID should haveid="captcha_id"andname="captcha_id".
  2. Use the "Elements" (Elements) tab in the browser console:
    • Locate the element:Right-click on the captcha image or related area on the page, select "Check" (Inspect), and the browser will automatically locate to the corresponding HTML code.
    • Verify ID:Confirm that these element IDs match exactly with the IDs used in the JavaScript code (including case). Common mistakes include inconsistent ID spelling.
    • Check element existence:Ensure that these elements are correctly loaded into the DOM when JavaScript attempts to access them. If JavaScript executes before the HTML elements are loaded, it may causenullorundefinedError.

Step 3: Examine the JavaScript code itself

Even if the HTML structure is correct, logical errors in JavaScript code or environmental issues may still cause errors.

  1. Check the code placement:The JavaScript code for verification code, especially the part involving DOM operations, is best executed after the HTML elements are loaded, usually at the bottom of the page</body>Before the label, or useDOMContentLoadedEvent listener. If placed too early,document.getElementById()and other methods may returnnull.
  2. Syntax error:The “Console” tab in the control panel will directly point out syntax errors. For example, mismatched parentheses, missing semicolons, and so on.
  3. jQuery dependency: tag-/anqiapi-other/167.htmlProvided two JavaScript examples, one is nativefetchAPI, another based on jQuery$.get.
    • If you are using a jQuery version, please make sure that your website has loaded the jQuery library correctly. If jQuery has not been loaded, the console will reportUncaught ReferenceError: $ is not definedError.
    • If you do not need jQuery, it is recommended to use the native.fetchAPI version, which can reduce external dependencies.
  4. API path:In JavaScript code:fetch('/api/captcha')or$.get('/api/captcha')of/api/captchaIs the path correct? Are there any extra slashes or missing ones? For sites running under certain subdirectories, it may be necessary to adjust to relative paths or absolute paths.
  5. Error handling:AnQiCMS provided Vanilla JS code that includes.catch(err => {console.log(err)})such error handling, which is a good habit. Check it carefully.console.log(err)The output content can provide detailed information about network request or JSON parsing failure.

Step 4: Investigate the AnQiCMS backend API response

If the front-end JavaScript code and HTML structure look fine, and the network request status code is200 OKBut if the verification code image still does not display or shows an error, the problem is very likely to be with the response data from the backend API.

  1. Confirm the JSON format:In the “Network” tab, select/api/captchaRequest, view the “Response” (response) tab.
    • Is the returned data in a valid JSON format?
    • Does the JSON containdataa field, anddatais there a sub-field undercaptcha_idandcaptchathese two sub-fields?
    • captchaThe value of the field is whether it is an image data encoded in Base64 or an image URL? Either way, it should be available. Base64 data will be quite long,data:image/png;base64,....
  2. Check AnQiCMS service running status:
    • If/api/captchaRequest returned404or500Firstly, confirm that the AnQiCMS service is running normally. Log in to the server via SSH, check if the AnQiCMS process is alive, and its runtime log (usually in the AnQiCMS installation directory under)running.logOr other custom log files).
    • If you use Baota panel or 1Panel for deployment, check the running status of its Go project or Docker container.
  3. Check reverse proxy configuration:Confirm that the reverse proxy configuration of Nginx or Apache and other Web servers is correct./api/captchaThe request for path redirection is sent to the actual running port of AnQiCMS (usually 8001). Incorrect proxy rules may cause the request to fail to reach the AnQiCMS service.

第五步：English configuration verification of AnQiCMS background

Finally, don't forget to check the system configuration of AnQiCMS backend. Sometimes, the abnormal function is just because a switch is not turned on.

  1. Is the captcha function enabled:Based ontag-/anqiapi-other/167.htmlThe comment captcha function must be enabled in the "Global Settings -> Content Settings" of AnQiCMS backend.If this master switch is not turned on, even the most perfect frontend JS code will not work properly.
  2. Other security settings:Occasionally, some global security settings, such as 'Anti-crawling interference code', may conflict with the captcha JS interaction in very few cases. Although the possibility is low, if other methods are ineffective, you can also temporarily turn off these settings for testing.