异域问题+Axios的AxiosError问题的解决（简单）

一、异域问题

ERROR:1  Access to XMLHttpRequest at 'http://localhost:8080/use' from origin 'http://localhost:5174' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

首先我们出现这种问题 大脑第一反应的可以是controller类中没有加@CrossOrigin注解，或者是端口号不对，但一定不能怀疑自己（不管 你就是最棒的！） 所以，看下面

1、检查端口号的问题。

        自己在后台代码中有没有输入正确的端口号，在这之前，先检查一下自己有没有CorsConfig类，没有的话在Config类中加上即可。代码如下：

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

@Configuration
public class CorsConfig {
    @Bean
    public CorsFilter corsFilter(){
        //1.添加CORS配置信息
        CorsConfiguration config = new CorsConfiguration();
        //1) 允许的域,不要写*，否则cookie就无法使用了
        config.addAllowedOrigin("http://localhost:517"); //这里填写请求的前端服务器
        //2) 是否发送Cookie信息
        config.setAllowCredentials(true);
        //3) 允许的请求方式
        config.addAllowedMethod("OPTIONS");
        config.addAllowedMethod("HEAD");
        config.addAllowedMethod("GET");
        config.addAllowedMethod("PUT");
        config.addAllowedMethod("POST");
        config.addAllowedMethod("DELETE");
        config.addAllowedMethod("PATCH");
        // 4）允许的头信息
        config.addAllowedHeader("*");

        //2.添加映射路径，我们拦截一切请求
        UrlBasedCorsConfigurationSource configSource = new UrlBasedCorsConfigurationSource();
        configSource.registerCorsConfiguration("/**", config);

        //3.返回新的CorsFilter.
        return new CorsFilter(configSource);
    }
}

这个类的主要解决跨域资源共享（CORS）策略的限制。然后在config.addAllowedOrigin中输入自己Vue中的端口号即可。因为没指定的vue端口号是随机的，所以这边建议将其固定哦，亲~。

在vite.config.ts中设置。

2、Controller类 

不出意外的话，应该就没问题了。如果还是异域的报错，那就去controller类中检查检查。

如果还有问题，请私信我！

二、axios的问题

说到这个问题，那就可多了。至少报的错让我流泪、心碎，啊

1、首先，

        就是这个问题。很常见的开头，无法找到xxx模块，这里就是没有下载安装axios的意思，要不就是你下载了但是没有导入的意思。那先跟着我来吧，咱一步一步来。 

（1）安装axios。

        用npm下载的速度，真的慢，慢到抓狂，如果你想挑战的话，那就来吧，代码在下面。所以这里我推荐用cnpm,就喜欢这种飞一般的感觉。

npm install axios

那么第一步，安装cnpm。ctr+r打开窗口，输入cmd，进入命令行，如果报错，那就是权限不够，建议以管理员的方式来运行，即可。也可以在Vue项目的终端进行。没用你来找我。

npm install -g cnpm --registry=https://registry.npm.taobao.org

 第二步，在vue项目的终端输入以下代码即可

npm install axios

（2）安装好之后，如果还是这个错，那咱就重启。不行往下看。

按住ctrl+shift+p。打开一个搜索框，输入Select TypeScript Version。

然后选择Use Workspace Version 即可。不行，再重启看效果。

  

 （3）AxiosError的报错

        这里我报错的原因是，在挂载那里有问题。

 

 这里的use 就直接指向了UserController类中的/user.所以一定一定要注意！

（4）然后这里再额外补充一下axios的使用吧。

作用：连接前后端 并传递信息

        使用步骤：

        a.创建项目时导好依赖。然后cnpm install。还可以另外安装，就像前面我所说的那样

        b.引入axios。在main.t里面引用。

然后就可以在App.vue中直接引用了。

就讲到这，晚点见~