前端调用后端接口404错误
 
1、后台没重启
2、@responseBody没加
3、前端调用的接口名称在后端没有
  
 


 


 

 
1、后台没重启
 
eclipse在写完controller接口之后
 
文件没保存
文件保存了没有重启服务
 
2、@responseBody没加
 
 
3、前端调用的接口名称在后端没有
 
 
注意接口是否以“.do”结尾

前端调用后端接口时，浏览器debug出现Failed to load resource: the server responded with a status of 400 (Bad Request)
 
之后debug还会出现出现问题的url
 
这种问题一般是前后端参数不一致的问题
 
比如user类，里面包含属性id,name,age,gender等参数
 
前端发送的json格式而后端接收的时候使用user类型接收，就会出现这个错误
 
需要先以json格式进行接收，之后进一步的将其转化为user类型的数据
 
 
 
 
 
400 500 错误也不一定是前后端联调的错误
 
也可能是前端类型参数不对，比如要求Integer，输入了null
 
艹

Nginx解决前端调用后端接口跨域问题

参考文章：
 
（1）Nginx解决前端调用后端接口跨域问题
 
（2）https://www.cnblogs.com/wangymd/p/11200746.html
 
（3）https://www.javazxz.com/thread-5142-1-1.html
 

备忘一下。

参考https://blog.csdn.net/Mr_carry/article/details/100537047?depth_1-utm_source=distribute.pc_relevant.none-task&utm_source=distribute.pc_relevant.none-task
 
后端
 
package com.pp.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import java.util.HashMap;
import java.util.Map;

@Controller
public class TestController {

    // 欢迎页面
    @RequestMapping("/test2")
    @ResponseBody
    public Map test() {

       Map<String,String> map = new HashMap<String, String>();
       map.put("测试1","123");
       map.put("测试2","456");

       return map;
    }
}
 
允许跨域配置类
 
package com.pp.config;


import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurationSupport;

@Configuration
public class CorsConfig extends WebMvcConfigurationSupport {
    @Override
    protected void addCorsMappings(CorsRegistry registry) {
        System.out.println("----------------------");
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowCredentials(true)
                .allowedMethods("GET", "POST", "DELETE", "PUT")
                .maxAge(3600);
    }
}
 
前端页面
 
在项目根目录创建一个 vue.config.js文件，可进行baseUrl配置，接口代理以及其他配置
 
（vue-cli3没有bulid和config文件夹）
 
module.exports = {
    devServer: {
        proxy: {
            // 配置跨域
            '/api': { //代理接口前缀为/api的请求
                target: 'http://localhost:7007', //需要代理到的目标地址
                ws: true,
                changOrigin: true, //是否跨域
                pathRewrite: {
                    '^/api': '' //重写路径
                }
            }
        }
    }
};
 
 
 
https://blog.csdn.net/lihefei_coder/article/details/97630544
 
https://blog.csdn.net/weixin_38578293/article/details/84823027
 
<template>
  <div class="info">
    这是从本地后端项目获取的json数据：
    <button v-on:click="postInfo">获取数据</button>
    <br>
    {{this.info}}
  </div>
</template>

<script>
  export default {
    name: 'App',
    data() {
      return {
        info: {}
      }
    },
    methods: {
      postInfo: function () {
        this.$http.post('/api/test2')
                .then(response => (this.info = response))
                .catch(function (error) { // 请求失败处理
                  // eslint-disable-next-line no-console
                  console.log(error);
                });
      }
    }
  }
</script>
<style>
  .info{
    width:100%;
    height: 100%;
  }
</style>
 
在main.js中：
 
Vue.prototype.$http = axios
 
所以是
 
 this.$http.post('/api/test2')
 
调用结果：