前端

Import axios from 'axios '

Import VueAxios from 'vue-axios '

Vue.use(VueAxios，Axios)

this . axios . post(' http://localhost 33608082/account/signup '，this.form validate)

后端

@RestController

@RequestMapping('/account ')

Public class帐户控制器{

@ postmapping(值='/signup ')

@ResponseBody

public JSON object signup(@ request body user user)

{

JSON object object=new JSON object()；

Object.put('type '，' success ')；

object . put(“message”，“注册成功”)；

返回对象；

}

}

报告错误

Xhr.js？13A 73360172 Options http://Localhost 33608082/Account/Signup 400

access to xmlhttprequest at ' http://localhost 33608082/account/Sign up ' from origin ' http://localhost 33608080 ' has

原因：前端为8080端口，后端为8082端口，出现跨域问题

解决方法

因为本人使用的是vue-cli4.x(高于vue-cli3.0)，所以在项目根目录下创建新的vue.config.js文件时，@vue/cli-service会自动加载此文件。主要代码如下：

Module.exports={

//all options for web pack-dev-server are supported

//https://web pack . js . org/configuration/dev-server/

DevServer: {

//https://github.com/chimurai/http-proxy-middleware # proxy context-config

//axios跨域代理配置表-允许您在相应的API界面中配置特定的请求代理

代理： {

//代理所有以“/api”开头的浏览器请求

/api': {

//服务器端域名和端口

target : ' http://localhost 33608082 '，

//如果设置为true:请求标头中的host设置为target

ChangeOrigin: true，

//在浏览器请求URL中，将“/api”替换为“/”。例如，浏览器请求为http://localhost 33608082/API/XXX。

//的服务器端接口是http://localhost 33608082/XXX

PathRewrite: {

/API' :'/'

}

}

}

}

}

另外，前端axios发送请求的URL不写域名，因此前端代码将更改为：

this . axios . post('/API/account/signup '，this.formvalidate)