本地Vue前端请求本地Spring Boot跨域问题（CROS错误）

最新推荐文章于 2025-05-22 09:43:31 发布

原创最新推荐文章于 2025-05-22 09:43:31 发布 · 2.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #spring boot

Spring Boot/Spring Cloud 同时被 2 个专栏收录

12 篇文章

订阅专栏

Vue

1 篇文章

订阅专栏

本文探讨了如何通过Nginx配置实现前端Vue应用通过id参数调用后端SpringBoot的RESTful接口，重点在于解决跨域问题，涉及前端URL、后端端口以及Nginx的代理设置。

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

一、Vue前端

请求的url为 :

GET /WebServer/home/get-user-info?id=1

在这里插入图片描述

二、Spring Boot后端

是一个Get请求的RestFul接口地址，且后端应用的端口为9101
在这里插入图片描述

三、Nginx配置（解决跨域问题）

server {
        #配置前端监听端口 通过http://localhost:9001/访问前端应用
        listen       9001;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;
        #配置前端应用包位置
        location / {
            root   /Users/konsy/Documents/Code/Vue/my-vue-project/dist;
            index  index.html index.htm;
        }
        #配置后端反向代理所有WebServer路由的请求都指向http://localhost:9101的后端应用
        location /WebServer/ {
            proxy_pass http://localhost:9101/;
        }
}