已解决：前后端跨域问题No ‘Access-Control-Allow-Origin‘ header is present on the requested resource

屿小夏

已于 2024-09-21 12:05:41 修改

阅读量1.3k

点赞数 6

文章标签： vue.js spring spring cloud

于 2024-08-27 09:59:59 首次发布

本文链接：https://blog.csdn.net/a1657054242/article/details/140365787

版权

个人简介：某不知名博主，致力于全栈领域的优质博客分享 | 用最优质的内容带来最舒适的阅读体验！文末获取免费IT学习资料！

🍅 文末获取更多信息 🍅 👇🏻 精彩专栏推荐订阅收藏 👇🏻

专栏系列	直达链接	相关介绍
书籍分享	点我跳转	书籍作为获取知识的重要途径，对于IT从业者来说更是不可或缺的资源。不定期更新IT图书，并在评论区抽取随机粉丝，书籍免费包邮到家
AI前沿	点我跳转	探讨人工智能技术领域的最新发展和创新，涵盖机器学习、深度学习、自然语言处理、计算机视觉等领域的研究进展和趋势分析。通过深入解读前沿技术、案例研究和行业动向，为读者带来关于人工智能未来发展方向和应用前景的洞察和启发。
Elasticsearch	点我跳转	详解 Elasticsearch 搜索和数据分析引擎
科技前沿	点我跳转	本档是关于科技和互联网的专栏，旨在为读者提供有趣、有用、有深度的科技资讯和思考。从多个角度探讨科技与人类生活的关系，包括但不限于科技趋势、产品评测、技术解读、行业观察、创业故事等内容。希望通过本栏，与读者分享科技的魅力和思考，让科技成为我们生活的一部分，而不仅仅是一个陌生的词汇。
Java之光	点我跳转	本栏将带领读者深入探索Java编程世界的种种奥秘。无论你是初学者还是资深开发者，这里都将为你提供丰富的Java知识和实用的编程技巧。
Linux学习日志	点我跳转	本专栏致力于探索Linux操作系统的各个方面，包括基础知识、系统管理、网络配置、安全性等。通过深入浅出的文章和实践指南，帮助读者更好地理解和应用Linux，提高系统管理和开发技能。无论你是初学者还是有经验的Linux用户，都能在本专栏中找到有用的信息和解决方案。
MySQL之旅	点我跳转	专栏将带领读者进入MySQL数据库的世界，探索其强大的功能和应用。我们将深入探讨MySQL的基本概念、SQL语言的应用、数据库设计与优化、数据备份与恢复等方面的知识，并结合实际案例进行讲解和实践操作。
精通Python百日计划	点我跳转	我们将引领你踏上一段为期100天的编程之旅，逐步深入了解和掌握Python编程语言。无论你是编程新手还是有一定基础的开发者，这个专栏都会为你提供系统而全面的学习路径，帮助你在短短100天内成为Python高手。

文章目录

在这里插入图片描述
已解决前后端跨域问题：No ‘Access-Control-Allow-Origin’ header is present on the requested resource

一、问题描述

在一个完全前后端分离的项目中，前端使用Vue.js，后端基于Spring Cloud。前端在向后端发送请求时，遇到了如下错误：

No 'Access-Control-Allow-Origin' header is present on the requested resource

二、解决过程

1. 分析问题

当我们请求一个接口时，出现Access-Control-Allow-Origin相关的错误，说明请求跨域了。跨域是指在浏览器中，使用JavaScript发起的请求，目标服务器的域名、协议或端口号与当前页面不一致。所有使用JavaScript的浏览器都会支持同源策略，即域名、协议和端口号相同。只要有一个不同，就会被认为是跨域请求。

2. 解决方案

方案一：后端配置CORS

在Spring Cloud后端，配置CORS（跨域资源共享），允许前端域名访问后端资源。可以在Spring Boot的配置类中添加如下配置：

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("http://your-frontend-domain.com")
                .allowedMethods("GET", "POST", "PUT", "DELETE")
                .allowedHeaders("*")
                .allowCredentials(true);
    }
}

通过以上配置，后端将允许指定的前端域名（http://your-frontend-domain.com）访问所有的API接口。

方案二：前端设置代理

在Vue.js项目中，可以通过设置代理来解决跨域问题。在项目根目录下新建vue.config.js文件，并在该文件内新增如下配置：

module.exports = {
    devServer: {
        proxy: {
            '/api': {
                target: 'http://your-backend-domain.com',
                ws: true,
                changeOrigin: true,
                pathRewrite: {
                    '^/api': '' // 将以/api开头的请求路径重写为目标服务器的请求路径
                }
            }
        }
    }
};