Vue use el-upload cross-domain upload file jump pit Small note

One: First of all, what is cross-domain, cross-domain is the problem of resolving browser-origin policy.

Then again, what is the homologous strategy, (noun interpretation: homologous strategy (same origin policy) is a convention, it is the most core of the browser core and the most basic security features, the lack of the same-origin policy, the normal function of the browser may be affected. It can be said that the Web is built on the basis of the same origin policy, the browser is only for the same origin of the implementation of the policy. In short, the same-origin strategy is to ensure that the user information security, and to steal data to prohibit the JS interaction between different domains.

What are the different domains?

1. Different domain names,

2. Domain name same Port different

3. Different protocols

There are a few differences on the cross-domain. Then we sometimes have to separate the back and forth and have to deal with the cross-domain

Second: The cross-domain solution mainly includes

1.JSONP 2.CORS is an abbreviation for cross-source resource sharing (Cross-origin Resource sharing), and now the use of these two methods is a big pile of articles, not much to repeat

Three: Here are the cross-domain issues I encountered when uploading files using Vue el-upload

　　As a PHP programmer used before the temporary modification of the project, just the front-end use of Vue, never used Vue, then Vue docking is the CI framework written interface, need to transfer to the tp5.1 framework interface. A magical phenomenon is that in the CI framework can be used, the interface in the tp5.1 framework involves cross-domain issues, for the willingness to know, if there is known Tongren want to tell thank you.

This is the upload method that I use, immediately upload, there is the following situation, and the background can also receive files and size also exists, but you will find that when you do the next step is to report cross-domain issues, this situation makes me very headache, search network found no solution to this problem, And I have no similar problem on the CI-written interface, such as

Mainly look at the following picture, mainly look at the request type, is not the type of upload file, I finally looked for a big God in the Vue group, he looked after me and said you understand Ah, the form is not cross-domain problem, I cut the picture to him, or this answer, and said he also use el-upload upload no problem, OK!! It seems that the problem is solved by itself.

And then I added a request to Vue. The header of the upload file multipart/form-data upload report boundary loss

later thought of a method, form upload is no cross-domain problem, then I will change him into a form upload, el-upload :before-upload= "beforeupload" execute before uploading

//console.log (file)//Here is the focus, Convert file to formdata data upload
let fd = new formdata ()
Fd. Append (file)
this . $http. Post ( ' http://localhost/j030_picc_ceshi/public/weixin/index/upload_img ', FD) . then ((res) => {

< Span style= "Font-style:italic" >< Span style= "COLOR: #f92672" >", (res) => {
console. Log (res)
})
return false

In this method directly create the form element to perform the upload below return false The organization performs the following actions, found that such uploads can perfectly solve the above problems

Vue use el-upload cross-domain upload file jump pit Small note