Tag Archives: front end

[Solved] npm install Error: error code ERR_SOCKET_TIMEOUT

1. Error information

New project, Vue + element, NPM install, The error information reported at that time is as follows.

error code ERR_SOCKET_TIMEOUT
9673 error network Socket timeout
9674 error network This is a problem related to network connectivity.
9674 error network In most cases you are behind a proxy or have bad network settings.
9674 error network
9674 error network If you are behind a proxy, please make sure that the
9674 error network 'proxy' config is set properly.  See: 'npm help config'
9675 verbose exit 1
9676 timing npm Completed in 545124ms
9677 verbose unfinished npm timer reify 1661242562981
9678 verbose unfinished npm timer reify:unpack 1661242811008
9679 verbose unfinished npm timer reifyNode:node_modules/svgo 1661242811170
9680 verbose code 1

2. Solutions

//Step 1


npm install webpack webpack-cli --global



//Step 2
npm install rxjs



//Step 3
npm install webpack webpack-cli --global



//Finally, direct boot success
npm run dev 

 

[Solved] Vue2 Cross-domain Error: AxiosError net::ERR_FAILED, Network Error, ERR_NETWORK

Request scenario:

current page URL: http://127.0.0.1:8000/testcase
URL of jump request page: http://127.0.0.1:5000/testcase_orm
When using Axios request, the page prompts cross domain error

Cross-domain error reporting information

Access to XMLHttpRequest at ‘http://127.0.0.1:5000/testcase_orm’ from
origin ‘http://localhost:8080’ has been blocked by CORS policy: No
‘Access-Control-Allow-Origin’ header is present on the requested
resource.

AxiosError {message: ‘Network Error’, name: ‘AxiosError’, code:
‘ERR_NETWORK’

Screenshot of vue2 cross domain error report

through the analysis of the code and the error report information, the problem appears in the cross domain request (cross domain request: the browser does not allow the current source request to access another different source request. The source refers to the request agreement, domain name, and port number. If one of the three is inconsistent, it is a cross domain request)

current URL request URL Is it cross-domain Result analysis
http://www.kuakuakua.com http://www.kuakuakua.com/index.html no Same origin (the same domain name, protocol, and port number)
http://www.kuakuakua.com https://www.kuakuakua.com cross domain Different protocols (http/https)
http://www.kuakuakua.com http://www.javashuo.com/ cross domain Different domain names (www.kuakuakua.com/www.javashuo.com)
http://www.kuakuakua.com:8080 http://www.kuakuakua.com:8081 cross domain Different port numbers (8080/8081)

Solution

  • Step 1: Find the vue.config.js file in the project directory and open it for editing

insert image description here

  • Step 2: According to the structure in the figure, copy the given code to module.exports

insert image description here

devServer: {
    proxy: {
      "/proxy_url":{           // /proxy_url This is used to match with the root path baseURL
        target: 'http://127.0.0.1:5000', // this is to fill in the cross-domain request domain + port number, that is, the URL to request (does not include the URL path)
        changeOrigin: true, // whether to allow cross-domain requests, a virtual server will be created locally, then send the requested data, and receive the requested data at the same time, so that the server and the server to interact with the data will not have cross-domain problems
        pathRewrite: { // path rewrite
            '^/proxy_url': '/' // replace the request address in target, the original request is http://127.0.0.1:8000/kuayu the actual request is http://127.0.0.1:8000/proxy_url/kuayu  
        }
      }
    }
  }
  • Step 3: Find the main.js file and set axios.defaults.baseURL to /proxy_url
axios.defaults.baseURL = ‘/proxy_url’
  • Step 4: Then the axios request in the methods in the xxx.vue file can be used normally. The complete request URL here is http://127.0.0.1:5000/testcase_orm (Step 4 is just to provide an example, the specific request URL Request according to the URL of your own project)
methods:{
    getCaseList: function(){
        console.log("xxxxxxxxx")
        console.log('Check if the interface call is successful')
        this.$axios.get('/testcase_orm').then((result)=>{
             console.log('Check if the interface call is successful, if it is called, it is successful')
             console.log(result)
        })
    }
  }

Solution Analysis.
Cross-domain problem, you can let the server to add the request header field information and allow cross-domain access, the server-side cross-domain problem is not described in this article, interested to see another Django cross-domain problem solving blog post

The vue cross domain problem is solved by using a proxy solution, which is forwarded to the target server through a proxy on the local server, so that the cross domain is only for the browser, and the cross domain problem does not occur for requests sent by the node service, thus solving the browser cross domain problem.

[Solved] Nuxt Import qrcodejs2.js / QRCode.js Error: document is not defined

preface

qrcodejs2.js/QRCode.js plug-in is in normal Vue.js project works normally. When you are in nuxt.js when used in the project, there will be an error, because qrcodejs2.js/qrcode.js the plug-in internally uses “browser specific (such as window/document) objects”. When compiled into nuxt.js without these, an error will be generated.

This article will provide you with the way to introduce the plug-in from 0-1, which runs perfectly.

Qrcodejs2.js and QRcode JS can be used.

First step

Download the adapter nuxt.js plug-in core code online.

Step 2

Prepare the file you just downloaded.

Put the QRcode.min.js file into the JS folder under the static static directory of the project (create one if you don’t have one).

Step 3

This step requires you to read the notes carefully, and you must understand why the path is written in this way.

Open the project nuxt.config.js configuration file, add the following code to the head configuration item:

// For now, we are using the local IP address http://192.168.3.5:8001 because we are in a development environment.
// Please replace it when you deploy your project later.
// --------- ---------- ---------- ---------- ---------
// For example, my future website deployment will be: http://www.demo.com
// Then this is how it should be written: http://www.demo.com/js/qrcode.min.js
// [domain + /js/qrcode.min.js]

src: 'http://192.168.3.5:8001/js/qrcode.min.js'

As shown in the following figure, pay attention to the position:

Step 4

At this point, your project can use the plug-in.

Cancel your import Import Code:

Test use

Or the original way of use:

// QRCode The keyword is a wrapped instance of the plugin, you can't change it!
let qrcode = new QRCode(qrcodeImgEl, {
    width: 100,
    height: 100,
    colorDark: '#000000',
    colorLight: '#ffffff',
    correctLevel: QRCode.CorrectLevel.H
})

[Solved] Cannot call sendError() after the response has been committed

Background of error reporting: when working on the open source project “Ruiji takeout”, after writing the interceptor code, when the front-end logs in, the back-end reports an error as follows:

        

 

Solution:

I found that my code, at the very beginning of the method, has unconditionally released any resources, i.e. filterChain.doFilter(request, response); when this line of code, and then continue to write the code to execute the response, it will report the above error. So, just comment out this line of code.

[Solved] vue watch Error: Error in callback for watcher “xxx“: “TypeError: Cannot read properties of undefined …

 

1. Question

1. Listening to an object in data, an error is reported. The error is strange: you cannot use the apply method on undefined

1) detailed errors are as follows:

vue.esm.js?9b69:5059 [Vue warn]: Error in callback for watcher "flowCategory": "TypeError: Cannot read properties of undefined (reading 'apply')"

found in

---> <FlowItem> at src/projects/comen/implemenceWorkstation/flowSetting/FlowItem.vue
       <ElTabPane> at packages/tabs/src/tab-pane.vue
         <ElTabs> at packages/tabs/src/tabs.vue
           <View> at src/views/implemenceWorkstation/flowSetting/view.vue
             <Index> at src/layout/index.vue
               <App> at src/App.vue
                 <Root>
warn$2 @ vue.esm.js?9b69:5059
logError @ vue.esm.js?9b69:3728
globalHandleError @ vue.esm.js?9b69:3724
handleError @ vue.esm.js?9b69:3691
invokeWithErrorHandling @ vue.esm.js?9b6

2) the code is as follows:

  watch: {
    flowCategory: {
      hanlder(newval, oldval) {
        console.log('flowCategory', newval, oldval);
      },
      deep: true
    }
  }

2. Solution:

After searching for a long time, I found that I had written the word “handler” incorrectly. I typed it incorrectly and wrote it as “hanlder”, and the IDE did not prompt  &***&;

Change it to the following. That’s all

  watch: {
    flowCategory: {
      handler(newval, oldval) {
        console.log('flowCategory', newval, oldval);
      },
      deep: true
    }
  }

3. Now we finally understand the error reporting: it is to tell us that the handler has a problem. The watch does not know what to do when monitoring changes.

[Solved] This dependency was not found: * core-js/modules/es.error.cause.js in ./node_modules/_@babel_runtim

Error Message:

This dependency was not found: * core-js/modules/es.error.cause.js in ./node_modules/_@babel_runtim

This dependency was not found:
core-js/modules/es.error.cause.js in ./node_modules/_@[email protected]@@babel/runtime/helpers/createForOfIteratorHelper.js, ./src/directive/permission/hasPermi.js and 5 others
To install it, you can run: npm install --save core-js/modules/es.error.cause.js

 

Solution:
1.vue project: npm install core-js –save
2.npm install
3.npm run dev
or
1.vue project: cnpm install core-js –save
2.cnpm install
3.cnpm run dev
Perfect solution!!!

uniapp [Vue warn]: Error in onLoad hook: “TypeError: Attempting to change the setter of an unconfigu

1. Background

I found this error when developing wechat applet with uniapp, and recorded how I solved it!

2. Error message

uniapp [Vue warn]: Error in onLoad hook: “TypeError: Attempting to change the setter of an unconfigurable property.”

3. Error reason:

Because in the Object.defineproperty method, the control property cannot be deleted. It is in an unconfigurable state.

4. Error analysis

Let’s take a look at the specific use of the Object.defineproperty method:

The role of Object.defineproperty is to define a new property directly on an object, or modify an existing property

Object.defineproperty parameter

The Object.defineproperty method needs to pass 3 parameters

Object.defineproperty(obj, prop, desc)

Parameter 1: obj The current object whose properties need to be defined

Parameter 2: prop The name of the property that currently needs to be defined

Parameter 3: The desc descriptor is generally an object

Generally, by assigning a value to the property of the object, the property of the object can be modified or deleted, but the property of the object can be defined by Object.defineProperty(), and the property of the object can be controlled more precisely by the setting of the descriptor.

Object.defineProperty(obj, variate, {
                enumerable:true, //Controls whether the property can be enumerated, the default value is false
                 //writable:true, //Whether the control property can be modified, the default value is false
                 configurable:true, //Control whether the property can be deleted, the default value is false
                set: function (value) {
                    console.log('global set value!');
                    val = value; 
                    const data = {};
                    data[variate] = value;
                    console.log('page set value!');
                    page.setData(data);
                },
                get: function () {
                    console.log('global get value!');
                    // This will be executed when getApp().globalData.variate is called in other interfaces.
                     return val; // return the current value
                }
            });

Finally, there are two most important attributes, set and get (that is, accessor Description: define how attributes are accessed). What are these two attributes used for?

Note: when getter or setter methods are used, writable and value attributes are not allowed (if used, an error will be reported directly)

5. Solution

This error is caused by the value of configurable being set to false, so it can be changed to true! Pay attention to the error prompt on the console. Maybe your error is reported in other situations!

[Solved] WebPack Error: Watchpack Error (watcher): Error: ENOSPC: System limit for number of file watchers reache

The following error occurs when the Vue project runs the NPM run serve command in the deepin20 system environment: (webpack error: watchpack error (watcher): error: enospc: system limit for number of file watchers reach)

Cause analysis: the limitation of Linux system causes this error!

Solution:

The problem can be solved by executing the following commands on the terminal:

echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p
sudo sysctl --system

[Solved] No ‘Access-Control-Allow-Origin‘ header is present on the requested resource.errError: Network Error

Console error message

Access to XMLHttpRequest at 'http://**/login' from origin 'http://**:9528' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
errError: Network Error

Cause analysis

According to Access-Control-Allow-Origin, it can be seen that it is a cross domain problem. If one address accesses another address, if any of the three places is different in this process, cross domain problems will occur.

1. Access agreement

HTTP, https

2. The port number is different

My error report here is to use 9528 to access 8001

3. Different IP addresses

Solution:

1. Add a comment on the back-end interface controller @CrossOrigin
2. Use the gateway to solve the problem

[Solved] Vue Error: Parsing error:No Babel config file detected for xxx

In the Vue project, the following error is reported at the beginning of each file.
Prompt: Parsing error: No Babel config file detected for xxx. Either disable config file checking with requireConfigFile: false, or configure Babel so that it can find the config files.eslint
Solution:
Add “requireConfigFile”: false in “parserOptions” of the package.json file as below:

npm run dev Error: opensslErrorStack: [ ‘error:03000086:digital envelope routines::initialization error‘ ]

npm run dev Error: opensslErrorStack: [ ‘error:03000086:digital envelope routines::initialization error‘ ]

report errors:

Solution:

Method 1: Replace the scripts part in package.json:

 "scripts": {
    "dev": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve",
    "serve": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve",
    "lint": "eslint --ext .js,.vue src",
    "build:prod": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service build",
    "build:stage": "vue-cli-service build --mode staging",
    "preview": "node build/index.js --preview",
    "new": "plop",
    "svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml",
    "test:unit": "jest --clearCache && vue-cli-service test:unit",
    "test:ci": "npm run lint && npm run test:unit"
  }

Method 2: reduce the node version

[Solved] “npm WARN logfile could not be created: Error: EPERM: operation not permitted,…”

Error: “npm WARN logfile could not be created: Error: EPERM: operation not permitted,…”

npm WARN logfile could not be created: Error: EPERM: operation not permitted, open 'D:\nodejs\node_cache\_logs\2022-08-09T03_07_24_221Z-debug-0.log'
npm WARN logfile could not be created: Error: EPERM: operation not permitted, open 'D:\nodejs\node_cache\_logs\2022-08-09T03_07_24_798Z-debug-0.log'
npm ERR! code EPERM
npm ERR! syscall open
npm ERR! path D:\nodejs\node_cache\_cacache\tmp\299683ad
npm ERR! errno -4048
npm ERR! Error: EPERM: operation not permitted, open 'D:\nodejs\node_cache\_cacache\tmp\299683ad'
npm ERR!  [Error: EPERM: operation not permitted, open 'D:\nodejs\node_cache\_cacache\tmp\299683ad'] {
npm ERR!   errno: -4048,
npm ERR!   code: 'EPERM',
npm ERR!   syscall: 'open',
npm ERR!   path: 'D:\\nodejs\\node_cache\\_cacache\\tmp\\299683ad'
npm ERR! }
npm ERR!
npm ERR! The operation was rejected by your operating system.
npm ERR! It's possible that the file was already in use (by a text editor or antivirus),
npm ERR! or that you lack permissions to access it.
npm ERR!
npm ERR! If you believe this might be a permissions issue, please double-check the
npm ERR! permissions of the file and its containing directories, or try running
npm ERR! the command again as root/Administrator.

npm ERR! Log files were not written due to an error writing to the directory: D:\nodejs\node_cache\_logs
npm ERR! You can rerun the command with `--loglevel=verbose` to see the logs in your terminal

Solution:

  1. window + r –> cmd –> where node –> find the path where nodejs is located
  2. nodejs file –> right click –> properties

3. Security -> Select Users -> Edit -> Check Full Control -> Click Confirm

    why is this problem reported? Because I don’t have permission