Recording pit encountered end of the separation of project development at the time before and after

Question below:

In an actual project development, I am responsible for front-end development, using vue + axios, background using php, because of our development environment is under a different domain name and port,

So there has been cross-domain problem, of course php server can solve this problem directly, but after back-end setup, the front every time a request to issue options, and then post the request,

This plainly, is that each interface request twice. We have to analyze the reasons:

For security reasons, not all of the domain name to access back-end services can be. In fact, before the formal cross-domain, the browser will launch a pre-screening as needed (ie option request), used to allow the server to allow the return method (such as get, post), 
the cross-domain access of Origin (source or domain) , as well as the need Credentials (authentication information) and so on. Then the browser under what circumstances can preflight it?

 

solution:

 1, axios other parameters in the request header (due to development needs, the request header does add some other parameters, such as token)

Solution: abnormal parameters can be removed

 

2, due to the default axios request header: Content-Type: application / json, we send to the background can be changed to formdata

axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded';

After completion of this change, also you need to format the data, and then to see:

<script type="text/javascript" src="https://cdn.bootcss.com/qs/6.5.1/qs.min.js"></script>

After completion of the introduction of the library, the data transfer is performed 

Qs.stringify({
     mobile:this.mobile,
     verfiyCode:this.sms_code,
}),

 

 Is not ok, then we then send the request, then the options requested gone.