Tag Archives: #View

[Solved] Vue Error: /sockjs-node/info?t=

Error reporting description

After running NPM run serve, the interface has been called in the network: http:// * * */sockjs node/info?t=***

Error reporting reason

Sockjs node is a JavaScript library that provides cross browser JavaScript APIs and creates a low latency, full duplex communication channel between browsers and web servers.

There are related calls in the dependent source code

Solution

CTRL + P open file node_modules\sockjs-client\dist\sockjs.JS
Ctrl + G jump to line 1611
refer to the figure below, comment out the call of line 1611, and restart the project

Use of $watch in Vue (solve rangeerror: maximum call stack size exceeded)

Problems encountered:

In a requirement, the change of a form needs a function of history recording. Because the form is very large (it is to edit an article), it is impossible to be specific to a certain attribute, so the method of watch monitoring is adopted, and {deep: true} is set. However, when previewing, I encountered the error of rangeerror: maximum call stack size exceeded . After some investigation, I found that it was caused by watch monitoring, and then I didn’t know what the problem was.

Even if nothing is written in the business code, a simple console.log will not work. As long as deep: true is set, an error will be reported, which is a headache. I didn’t find a similar case on the Internet. I thought again: since the error lies in the watch, can I dynamically monitor and cancel monitoring ?I found the answer on the official website https://cn.vuejs.org/v2/api/#vm -watch

Basic use of $watch (refer to the official website)

VM. $watch (exporfn, callback, [options]) the return value is a {function} unwatch , which returns a function to cancel the observation, which is used to stop the trigger callback option: deep, deep listening option: immediate, whether to execute once immediately

// Key Path
vm.$watch('a.b.c', function (newVal, oldVal) {
  // Do something
})

// function
var unwatch = vm.$watch(
  function () {
    // The expression `this.a + this.b` is called every time a different result is reached
    // the handler function will be called.
    // This is like listening for an undefined computed property
    return this.a + this.b
  },
  function (newVal, oldVal) {
    // Do something
  }
)

// Cancel the listener

unwatch()

My solution, for reference

// Call setWatchChapters when created, call removeWatchChapters in other cases, depending on the business case
export default {
	...
	data () {
		return {
			unWatchChapters: null
		}
	},
	created(){
		this.setWatchChapters()
	},
	methods:{
		setWatchChapters () { // Setting up a listener for chapters
			if (!this.unWatchChapters) { // prevent setting listeners more than once
				setTimeout(() => { // There are still some bugs, so use setTimeout to add to the event queue
					this.unWatchChapters = this.$watch('report.chapters', () => {
						// do something
					}, { deep: true })
				}, 0)
			}
    	},
    	removeWatchChapters () { // Unlisten to chapters
			if (this.unWatchChapters) {
				this.unWatchChapters()
				this.unWatchChapters = null
			}
		}
	}
}

[Error] because it violates the following Content Security Policy directive

[Error] because it violates the following Content Security Policy directive

In the process of HTML development, we encountered the following error, which means the permission problem of HTML meta setting

Refused to connect to 'blob:http://localhost:8080/6d57f07f-3c2f-49ca-be30-fd0b7f4cff6e' 
because it violates the following Content Security Policy directive: 
"default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap: content: ". 
Note that 'connect-src' was not explicitly set, so 'default-src' is used as a fallback.

Specifically, this bug appears when using vue-html2pdf.
The screenshot is as follows

the last time I encountered a similar problem was when I used the video tag.
These are similar problems

You need to open the source code of the HTML page (for example, index.html ), modify the meta in the head section

  <meta http-equiv="Content-Security-Policy" content="default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap: content: https://ssl.gstatic.com; 
    media-src * blob: 'self' http://* 'unsafe-inline' 'unsafe-eval'; 
    style-src * 'self' 'unsafe-inline'; 
    img-src * 'self' data: content:; 
    connect-src * blob:;">

The example is divided into multiple lines and can be modified according to your own needs. For example, IMG SRC allows * and other types of resources.
Connect SRC allows * blob: and other types of resources. Note that * does not contain the blob: type. If it is not declared, blob: may be wrong

reference material

Used to connect to XXX – because it violates the following content security policy
Cordova rejected to connect to xxxxx - white list refuses to send network requests
meta tag official website: https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/meta
Content security policy website: https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Content-Security-Policy__ by_ cnvoid