跨域：springboot+vue 发送ajax请求

た入场券 2022-05-14 02:25 351阅读 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][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;
        }

[https_blog.csdn.net_qq_36688143_article_details_82260722]: https://blog.csdn.net/qq_36688143/article/details/82260722