Vue+axios+spring Boot Encounters problems (cross-domain requests)

Tag: Ken Method als encounters version override boot [] Eve

One, click the button will send two requests the question

The first request method is the options

A second request method is a post

The background filter also detects access two times, but it is occasionally repeated access.

This is because a cross-domain request causes an empty request check server to be sent before each request.

You can add this in a background filter:

@Override Public voidDoFilter (ServletRequest request, servletresponse response, Filterchain chain)throwsIOException, servletexception {httpservletresponse response1=(httpservletresponse) response; HttpServletRequest Request1=(httpservletrequest) request; Response1.setheader ("Access-control-allow-origin", "*"); Response1.setheader ("Access-control-allow-credentials", "true"); Response1.setheader ("Access-control-allow-methods", "*"); Response1.setheader ("Access-control-allow-headers", "Content-type,access-token"); Response1.setheader ("Access-control-expose-headers", "*"); if (Request1.getmethod (). Equals (RequestMethod.OPTIONS.toString ())) {System.out.println ("-----check------"); Return;    } Chain.dofilter (request, response); }

Second, cross-domain request problem

Add filter, add the above code inside the filter to solve cross-domain request problem

Third, the Axios access interface background read the data are empty the problem is as follows

Front desk:

<script>Exportdefault{data () {return{formItem: {menu_name:‘‘, Menu_info:No, Menu_level:‘‘, Menu_state:true, App_version: [], Operate_user:' Admin ', Menu_superior:‘-‘}, App_versions: [{value:' 100 ', Label:' 1.0.0 '}, {value:' 101 ', Label:' 1.0.1 '}, {value:' 102 ', Label:' 1.0.2 '}, {value:' 110 ', Label:' 1.1.0 '}]}}, methods: {addMenu:function{console.log (form) {json.stringify (form)) This. $http. Post (' Http://localhost:8888/api/manager/addMenu ', { data:JSON.stringify (form) }). Then (function(res) {if(res.data.no = = ' 1 ') {alert (' OK ')            }          })          .Catch(function(Err) {Console.log ('----failed-----');      }); }    }  }</script>

Background log

Can see the front desk clearly passed, backstage can also receive, but why all is null, engaged in a half-day here the problem:

  function {console.log (form) {        json.stringify (form))        this. $http. Post (' http://localhost:8888/api/ Manager/addmenu ', (form))          . Then (function  (res) {            if (res.data.no = = ' 1 ') {              alert (' OK ')            }          })          . Catch (function  (err) {            Console.log ('----failed-----');          });      

In fact, there is no need to transfer JSON, direct object can be, and then look at the background:

That's right.

Vue+axios+spring Boot Encounters problems (cross-domain requests)