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

最新推荐文章于 2024-10-01 11:53:34 发布

我爱君君吖～

最新推荐文章于 2024-10-01 11:53:34 发布

阅读量8.6k

点赞数 10

文章标签：前端 vue.js java

本文链接：https://blog.csdn.net/qq_62649563/article/details/131138490

版权

文章介绍了处理跨域问题的解决方案，包括在后端添加@CrossOrigin注解、配置CorsConfig类以允许特定端口的访问。同时，对于Vue项目中axios的使用，文章提到了安装axios、选择TypeScript版本以及处理AxiosError的方法。

摘要由CSDN通过智能技术生成

一、异域问题

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中设置。