vue用axios进行token请求出现has been blocked by CORS policy: No ‘Access-Control-Allow-Origin‘ header的解决方案

最新推荐文章于 2025-03-03 14:17:17 发布

亚伯拉罕·冯

最新推荐文章于 2025-03-03 14:17:17 发布

阅读量4.3k

点赞数

分类专栏：笔记

本文链接：https://blog.youkuaiyun.com/FHlang/article/details/115770129

版权

在Vue项目中使用axios进行API请求时遇到了CORS错误：'Access-Control-Allow-Origin' header缺失导致请求被阻止。该问题源于前后端不同端口引起的跨域访问。尝试使用@CrossOrigin注解解决，但未成功。解决跨域问题需要正确配置允许跨域的响应头。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

遇到的问题一

Access to XMLHttpRequest at ‘http://localhost:8081/order/no’ from origin ‘http://localhost:8080’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

翻译：通过CORS策略已阻止从源"http:// localhost:8080"访问"http:// localhost:8081/order/no"处的XMLHttpRequest：所请求的资源上不存在"Access-Control-Allow-Origin"标头。

理解：因为vue跟后端服务的端口不一样，所以访问就是跨域访问，它要求访问的请求头里有Access-Control-Allow-Origin，而这个不配置就没有

解决的方法

@Configuration
@EnableWebSecurity
public class WebSecurityConfig extends WebSecurityConfigurerAdapter {
   
    @Override
    protected void configure(HttpSecurity http) throws Exception {
   
        http.csrf().disable(); //开启跨域访问
        http.cors(); //开启跨域资源共享
    }
}

也许这个解决方法有效但我并没成功用它解决问题：~~@CrossOrigin注解~~ *

@CrossOrigin(allowedHeaders = {
   "Authorization"})
@GetMapping("/res")
public ResponseResult<List<vongCover>> pages(){
   
        return new ResponseResult<List<vongCover>