1. Vue front-end cross-domain configuration, this is recommended during the development and debugging stage!
devServer: {
proxy: { // 配置跨域
'/api': {
target: 'http://localhost/Apis', // 这里后台的地址模拟的;应该填写你们真实的后台接口
changOrigin: true, // 允许跨域
pathRewrite: {
/*
我们使用的时候，比如login请求：/api/login
重写路径，当我们在浏览器中看到请求的地址为
http://localhost:9528/api/login 时
实际上访问的地址是：
http://localhost/Apis/login, 记得通过'^/api': '' 把/api去掉，不然实际请求会多出一个/api,会变成http://localhost/Apis/api/login
如何验证？：使用工具访问 http://localhost:8080/api/core/getData/userInfo
*/
'^/api': ''
}
}
}
},2. Solve the front-end cross-domain problem through Vue, but the post request cannot receive the requestBody?
When debugging a request, first use the tool to debug it. For example, the REST Client that comes with idea
The backend receives the request and prompts:
Unexpected character ('t' (code 116)): was expecting double-quote to start field nameIt was later discovered that the key value of the request was sent without a colon, so there are two ways to handle it::
@RequestBody 会把接收到的对象进行自动转换，转换的对象是你申明的对象。如下方的String，UserForm
//1.key不带冒号，可以转换为string，map解析。
loginForm = {username: "admin", password: "111111"}
@PostMapping(value = "/login")
@ResponseBody
public Result<String> loginIn(@RequestBody String loginForm) {
Map ob= (Map) JSONObject.parse(loginForm);
String name = (String) ob.get("username");
String pass = (String) ob.get("password");
}
//2.key带冒号，可以直接转换对象，注意UserForm 的key要与RequestBody 的username，password保持一致
loginForm = {”username“: "admin", ”password“: "111111"}
@PostMapping(value = "/login")
@ResponseBody
public Result<String> loginIn(@RequestBody UserForm loginForm) {
String name = loginForm.getUsername;
String pass = loginForm.getPassword;
}
3. The REST Client can be debugged directly, but after debugging the cross-domain address, the requestBody still cannot be received?
When accessing the cross-domain address, the access fails!
Directly access the request address, not the address after cross-domain, success!
First determine whether access to this cross-domain address has entered the request. The interruption point found that the background post request loginIn was not entered. Could it be that the cross-domain failure failed because it was not accessing the actual interfacehttp: //localhost/Apis/login, the background first intercepts the Apis/login interface to see if this interface is accessed. The break point found that it was actually accessed.
REST Client accesses the address after cross-domain:
The accessed address intercepted in the background:
That is to say, this interface has received it, and after it is released, it is still unable to enter the loginIn interface. In other words, this request parameter may not exist. Add a new loginIn test interface and test as follows:
That is, the interface with parameters cannot be entered, but the interface without parameters can be entered. In other words, when the interface requestBody with parameters is converted into the specified parameter String, an error occurs. Verify:
To directly access the interface for debugging, you can enter the interface and obtain the requestBody. There is no problem with the backend, that is, there is a problem with the Vue front-end access request, specifically this request body. Start debugging the front end!
Will there be any problem with the requestBody sent by the Vue front-end? The front end simulates ajax requests through mocks to see if there are any special operations on the mocks. Looking at the relevant documentation, there is a place where the body is manipulated:
Shield the code in the screenshot and re-run the project. Note that you are re-running the Vue project! The background can receive the post /Apis/login request sent by Vue!
Department reference:https://blog.csdn.net/yys190418/article/details/107217457/