Access to XMLHttpRequest at ‘httpxxxx‘ from origin ‘httpxxxx‘ has been blocked by CORS policy

澎湖Java架构师

于 2022-02-26 19:07:44 发布

阅读量3.3k

点赞数

分类专栏：前端 html 面试文章标签： vue.js 前端 spring boot

本文链接：https://blog.youkuaiyun.com/m0_54850604/article/details/123154293

版权

在前后端分离项目中遇到CORS跨域错误，导致请求失败。错误信息显示缺少'Access-Control-Allow-Origin'头。分析表明是浏览器的同源策略限制。解决方案包括在SpringBoot和Spring Security项目中配置CORS，以及在Vue-cli前端通过vue.config.js和main.js设置。同源策略是保证网络请求安全的策略，不遵循可能导致信息安全风险。

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

解决CORS跨域问题

今天做前后端分离的项目时, 前端向后台发送请求发现报错: Access to XMLHttpRequest at ‘http://localhost:8082/doLogin’ from origin ‘http://localhost:8080’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
问题分析: 从报错信息可以知道是由于CORS(Cross-origin resource sharing)所致

解决方案

SpringBoot项目解决方案

/**
 * 解决异步访问跨域
 */
@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        //本应用的所有方法都会去处理跨域请求
        registry.addMapping("/**")
                //允许远端访问的域名
                .allowedOrigins("http://localhost:8080")
                //允许请求的方法("POST", "GET", "PUT", "OPTIONS", "DELETE")
                .allowedMethods("*")
                //允许请求头
                .

最低0.47元/天解锁文章