vue3向spring cloud发送请求失败

Question

vue3向spring cloud发送请求失败 上面是报错截图 求解决

Answer 1

引自免费微信小程序：皆我百晓生

这个问题是关于Vue.js前端应用向Spring Cloud后端发送请求失败的问题，特别是涉及到CORS（跨源资源共享）策略和401 Unauthorized错误。从给出的信息来看，这个问题可能与以下几个方面有关：

1. CORS策略问题

报错信息中提到了CORS策略，特别是在preflight响应中请求的header字段authorization不允许跨源访问。这通常意味着后端服务器没有配置正确的CORS策略来允许来自前端应用的请求。你需要确保后端服务器（在这种情况下是Spring Cloud）允许来自http://localhost:5173的跨源请求，并且允许authorization这个header字段。

在Spring Cloud中，你可以通过配置CORS策略来解决这个问题。你可以使用@CrossOrigin注解或者在Spring Security配置中设置CORS策略。例如：

@Configuration
public class WebConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**") // 允许所有路径的跨域请求
            .allowedOrigins("http://localhost:5173") // 允许指定的origin
            .allowedMethods("*") // 允许所有方法（如GET、POST等）
            .allowedHeaders("*"); // 允许所有头部字段，包括Authorization等自定义头部字段
    }
}

2. 401 Unauthorized错误

这个错误通常表示请求未授权。这可能是因为你尝试在没有提供有效认证信息的情况下访问需要授权的资源。确保你的前端应用正确地发送了认证信息（如token），并且后端服务器正确地验证了这些信息。如果你在前端使用Axios发送请求，确保你在请求头中包含了正确的认证信息。例如：

axios.post('http://localhost:8080/room/login', data, {
    headers: {
        'Authorization': 'Bearer ' + token // 使用你的认证方式（如Bearer token）和正确的token值替换这里的示例内容
    }
});

综合解决方案：

结合上述两点，你需要确保前端正确发送请求，并确保后端配置了正确的CORS策略和身份验证机制。你可能需要检查前后端的代码和配置来确保一切都正确无误。另外，你还可以尝试清理浏览器的缓存和cookies（尤其是与身份验证相关的），然后重新尝试发送请求。这有时可以帮助解决因缓存或过时的认证信息导致的问题。如果问题仍然存在，你可能需要进一步调试前后端的代码和配置来找到问题的根源。