跨域：springboot+vue 发送ajax请求-蒲公英云

跨域：springboot+vue 发送ajax请求

た入场券 2022-05-14 02:25 412阅读 0赞

springboot vue 发送ajax请求（跨域问题）

1)修改vue项目的config/index.js里的dev/proxyTable内容

proxyTable: {
      // proxy all requests starting with /api to jsonplaceholder
      '/api': {//虚拟目录
        target: 'http://localhost:3000',//后台NodeSpringboot项目的请求网址
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''//由于上面的虚拟目录实际上是不存在的，不去掉的话访问的时候显示的url会变成'http://localhost:3000/api'，所以得去掉
        }
      }
    },

2）在springboot项目的Controller新建一个类

@Configuration
public class CorsConfig  extends WebMvcConfigurerAdapter{
      @Override  
        public void addCorsMappings(CorsRegistry registry) { 
            System.out.println("----------------------");
            registry.addMapping("/**")  
                    .allowedOrigins("*")  
                    .allowCredentials(true)  
                    .allowedMethods("GET", "POST", "DELETE", "PUT")  
                    .maxAge(3600);  
        }  
}

3、在vue的页面中ajax请求就好，注意
①url:’http://localhost:8763/aa‘
②controller要加@ResposeBody，因为是接收json，否则报404

（解决方法链接：https://blog.csdn.net/qq_36688143/article/details/82260722）
③ 如果返回值不是json或者list、map等类型格式，只是字符串，那vue那边的ajax会接收不到返回值，无反应

aa: function (event) {
        $.ajax({
          type:'POST',
          url:'http://localhost:8763/aa', 
          /* 要不要都可以
          headers:{
             "Conten-Type":"http://localhost:3000/"
           },*/
          data:{
          },
          success:function (backDate) {
            console.log('666');
            console.log(backDate);
          }
        })
      },

4、后台controller接收请求

@ResponseBody
    @RequestMapping(value = {"/aa"},produces = {"application/json;charset=UTF-8"},method = RequestMethod.POST)
    public List aa(){
        List<UserInfo> list =  userService.findAllUser();
        System.out.println("后台接收ajax请求："+list.size());
        return list;
    }