SpringBoot与Vue项目的跨域问题

最新推荐文章于 2024-05-29 00:41:40 发布
最新推荐文章于 2024-05-29 00:41:40 发布
阅读量1.4k 收藏 4
点赞数
文章标签： vue.js spring boot 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ice_bear221/article/details/129098951
版权

SpringBoot与Vue项目的跨域问题

1. 项目初始化

1.1 SpringBoot项目

在这里插入图片描述

package com.icebear.controller;

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
  *
  * @author icebear
  * @date 2023/2/17
  * @info 测试sessionID
  */
@RestController
@RequestMapping("/api/tests")
public class TestController {

    @GetMapping("/getSession")
    public String getSession(HttpServletRequest request, HttpServletResponse response) {
        return request.getSession().getId();
    }
}

1.2 Vue项目

在这里插入图片描述

// main.js
import { createApp } from 'vue'
import App from './App.vue'

import axios from "axios";

axios.defaults.baseURL = 'http://localhost:8080/api'

const app = createApp(App)
app.mount('#app')
app.config.globalProperties.$axios = axios


<!-- App.vue -->
<template>
  <div class="btn-div">
    <button @click="send">发送请求，获取sessionId</button>
  </div>
  <div class="text-div">
    后面显示获取的sessionId：
    <span v-text="sessionId" style="color: red"></span>
  </div>
</template>

<script>

export default {
  name: 'App',
  data () {
    return {
      sessionId: ''
    }
  },
  methods: {
    send() {
      this.$axios.get('/tests/getSession')
        .then(res => {
          console.log(res)
          this.sessionId = res.data
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
}
</script>

<style scoped>

</style>

2. 跨域问题及解决

2.1 跨域问题出现

在启动SpringBoot项目和Vue项目之后，点击浏览器页面内的按钮，发送请求，此时浏览器的控制台会出现如下错误：

2.2 SpringBoot解决跨域问题

2.2.1 使用@CrossOrigin注解
package com.icebear.controller;

import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
  *
  * @author icebear
  * @date 2023/2/17
  * @info 测试sessionID
  */
@RestController
@RequestMapping("/api/tests")
// 使用@CrossOrigin注解处理跨域问题
@CrossOrigin
public class TestController {

    @GetMapping("/getSession")
    public String getSession(HttpServletRequest request, HttpServletResponse response) {
        return request.getSession().getId();
    }
}

浏览器结果如下：

在这里插入图片描述
在这里插入图片描述

2.2.2 实现WebMvcConfigurer接口的addCorsMappings方法

在这里插入图片描述

package com.icebear.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
/**
  *
  * @author icebear
  * @date 2023/2/17
  * @info 方法二：实现WebMvcConfigurer的addCorsMappings方法处理跨域
  */
@Configuration
public class MyCrosConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**") // 所有接口
                .allowCredentials(true) // 是否发送cookie
                .allowedOriginPatterns("*") // 支持域
                .allowedMethods("GET", "POST", "PUT", "DELETE") // 支持方法
                .allowedHeaders("*")
                .exposedHeaders("*");
    }
}

浏览器结果如下：

在这里插入图片描述
在这里插入图片描述

2.2.3 添加CorsFilter

在这里插入图片描述

package com.icebear.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

import java.util.Arrays;
/**
  *
  * @author icebear
  * @date 2023/2/17
  * @info 方法三：添加CorsFilter解决跨域问题
  */
@Configuration
public class MyCorsFilter {

    @Bean // 不要忘记添加此注解
    public CorsFilter corsFilter() {
        // 创建CORS配置对象
        CorsConfiguration config = new CorsConfiguration();
        config.addAllowedOriginPattern("*"); // 设置支持域
        config.setAllowCredentials(true); // 是否发送cookie
        config.setAllowedMethods(Arrays.asList("GET", "POST", "PUT", "DELETE")); // 支持的请求方式
        config.addAllowedHeader("*"); // 允许的原始请求头部信息
        config.addExposedHeader("*"); // 暴露的头部信息
        // 添加地址映射
        UrlBasedCorsConfigurationSource corsConfigurationSource = new UrlBasedCorsConfigurationSource();
        corsConfigurationSource.registerCorsConfiguration("/**", config);
        // 返回CorsFilter对象
        return new CorsFilter(corsConfigurationSource);
    }
}

浏览器结果如下：

在这里插入图片描述
在这里插入图片描述

3. 服务器部署后没有Cookie

3.1 环境模拟

3.1.1 软件准备
  1. linux虚拟机
  2. 安装java运行环境
  3. 安装nginx：LINUX安装nginx详细步骤
3.1.2 部署项目
  1. Vue项目构建成功后上传虚拟机；
  2. SpringBoot项目打包成功后上传虚拟机；
3.1.3 模拟域名
  1. 使用命令ifconfig获取虚拟机ip地址，例如：192.168.1.3；
  2. 修改windows的hosts文件，将域名和虚拟机的ip地址做映射；

如何修改hosts文件？几种修改hosts文件的方法

在这里插入图片描述

  1. 修改nginx配置，指定域名对应的端口和项目位置；
http {

    ......
    
    # 二级域名转发
    server {
        listen 80;
        server_name bear.iceindex.xyz;
        # root /www/iceindex.xyz/dist;
        # 二级域名对应的Vue项目转发
        location / {
            proxy_pass http://0.0.0.0:8091;
        }
    }
    # Vue项目的实际访问地址
    server {
        listen 8091;
        server_name localhost;
        root /www/iceindex.xyz/dist;
        location / {
            root /www/iceindex.xyz/dist;
            try_files $uri $uri/ /index.html;
        }
    }
}

3.2 运行项目

3.2.1 前后端部署在同一台服务器中

3.2.1.1 通过IP:Port方式访问项目

浏览器输入Vue项目的IP:Port访问，并发送请求，结果如下：

在这里插入图片描述

解决方法：

修改axios的默认配置:

import { createApp } from 'vue'
import App from './App.vue'

import axios from "axios";

// 本地SpringBoot项目地址
// axios.defaults.baseURL = 'http://localhost:8080/api'

// 服务器SpringBoot项目地址
axios.defaults.baseURL = 'http://192.168.1.3:8080/api'

// 添加下面一行可以获取cookie
axios.defaults.withCredentials = true

const app = createApp(App)
app.mount('#app')
app.config.globalProperties.$axios = axios

修改后结果：

从下图的结果中可以看出，成功获得了JSESSIONID所对应的cookie

在这里插入图片描述

3.2.1.2 通过域名访问项目

在浏览器输入Vue项目配置的域名地址进行访问，并发送请求，结果如下：

从下图中的结果中可以看出，没有获得JSESSIONID所对应的cookie

在这里插入图片描述
在这里插入图片描述

解决方法：

  1. 修改axios的baseUrl配置：
import { createApp } from 'vue'
import App from './App.vue'

import axios from "axios";

// 本地SpringBoot项目地址
// axios.defaults.baseURL = 'http://localhost:8080/api'

// 服务器SpringBoot项目地址 IP对应
// axios.defaults.baseURL = 'http://192.168.1.3:8080/api'

// 服务器SpringBoot项目地址 域名对应
axios.defaults.baseURL = 'http://bear.iceindex.xyz/api'

// 添加下面一行可以获取cookie
axios.defaults.withCredentials = true

const app = createApp(App)
app.mount('#app')
app.config.globalProperties.$axios = axios
  1. 修改nginx配置：
{
    # 二级域名转发
    server {
        listen 80;
        server_name bear.iceindex.xyz;
        # root /www/iceindex.xyz/dist;
        # 二级域名对应的Vue项目转发
        location / {
            proxy_pass http://0.0.0.0:8091;
        }
        # 二级域名对应的SpringBoot项目转发
        location /api {
            proxy_pass http://0.0.0.0:8080;
        }
    }
    # Vue项目的实际访问地址
    server {
        listen 8091;
        server_name localhost;
        root /www/iceindex.xyz/dist;
        location / {
            root /www/iceindex.xyz/dist;
            try_files $uri $uri/ /index.html;
        }
    }
}

修改后的结果：

在这里插入图片描述
在这里插入图片描述

3.2.2 前后端部署在不同服务器中

由于前后端部署在不同的服务器中，Vue项目的地址和SpringBoot项目的地址是不同的，模拟的方式为：Vue项目中的axios的baseUrl设置为SpringBoot项目地址：

import { createApp } from 'vue'
import App from './App.vue'

import axios from "axios";

// 本地SpringBoot项目地址
// axios.defaults.baseURL = 'http://localhost:8080/api'

// 服务器SpringBoot项目地址 IP对应
// axios.defaults.baseURL = 'http://192.168.1.3:8080/api'

// 服务器SpringBoot项目地址 域名对应
axios.defaults.baseURL = 'http://bear.iceindex.xyz/api'

// 添加下面一行可以获取cookie
axios.defaults.withCredentials = true

const app = createApp(App)
app.mount('#app')
app.config.globalProperties.$axios = axios

本地运行Vue项目结果：
在这里插入图片描述

解决方法：

将协议升级为https，并设置Cookie的SameSite值为None，Secure值改为true

详情参考：【跨域】一篇文章彻底解决跨域设置cookie问题！

4. 其他参考

解决vue+springboot前后端分离项目,前端跨域访问sessionID不一致导致的session为null问题

springboot-vue跨域详解

SpringBoot 解决跨域问题的 5 种方案！

手把手教 Nginx 部署 Vue 项目

【vue项目部署CSS失效】VUE部署后css样式加载无效和失效多种情况解决方案

vue项目部署 nginx 配置

新版本chrome浏览器带来的跨域请求cookie丢失问题

解决新版谷歌Chrome浏览器Cookie跨域失效问题

ice_bear221
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
后端跨域问题解决
weixin_45509601的博客
09-11 612
出于浏览器的同源策略限制。同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源（即指在同一个域）就是两个页面具有相同的协议（protocol），主机（host）和端口号（port） 当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域
spring boot + vue 跨域解决
xu_jinhang的博客
06-18 402
一、第一种方法： 1.1、应许某个方法能跨域请求，可以在方法上加上注解 @CrossOrigin(origins = "http://localhost:4000") @CrossOrigin(origins = "*" , maxAge = 3600) 二、第二种方法 在某个controller类上加入注解@CrossOrigin(origins = "*" , maxAge = 3600)，表示当前类中所有方法都可以跨域请求。 三、第三种方法 全局配置，改写请求头信息，实现跨域请求 i
SpringBoot与Vue交互解决跨域问题【亲测已解决】，【最全总结】
2401_84138927的博客
04-10 1202
浏览器同源策略首先一个定义一定要了解，就是浏览器的同源策略，什么是浏览器的同源策略， 简单来说就是浏览器发送请求的协议、域名和端口要和服务器接收请求的协议、域名以及端口一致。这样才能完成交互，但是很显然这样是不可能的，尤其在对于在同一台电脑上开发前后端分离的项目的时候，一定是会使用两个端口的。那么这样就形成了跨域问题。在这里分享一下我解决跨域问题用到的两个方法，一、VUE前端配置代理解决跨域。
SpringBoot+Vue：一站式解决跨域问题
05-05 1405
跨域问题（CORS，Cross-Origin Resource Sharing）是由于浏览器的同源策略导致的一种安全限制。当一个请求的域名、协议或端口与当前页面不一致时，就会触发跨域问题。
前后端分离跨域问题解决方案
最新发布
qq_53348178的博客
05-29 494
​​/***/@Override// 在这里添加过滤器初始化逻辑（CORS）​@Override// HttpServletResponse是ServletResponse接口的一个实现类，专门用于处理HTTP响应//设置CORS响应头// 允许所有域名访问// 允许的HTTP方法// 预检请求的缓存时间// 允许的请求头​// 如果是预检请求（OPTIONS请求,一般是浏览器自己发送的请求），直接返回成功} else {
深入理解解决跨域问题vue+Springboot
weixin_42139800的博客
06-10 547
深入理解解决跨域问题vue+Springboot
Vue与Springboot跨域问题
寸铁的博客
06-22 273
Vue与Springboot跨域问题解决方案
SpringBoot与Vue交互解决跨域问题【亲测已解决】
m0_65634190的博客
12-30 3337
最近在利用springboot+vue整合开发一个前后端分离的个人博客网站，所以这一篇总结一下在开发中遇到的一个问题，**关于解决在使用vue和springboot在开发前后端分离的项目时，如何解决跨域问题。在这里分别分享两种方法，分别在`前端vue中解决`和在`后台springboot中解决`。**
springboot vue 跨域问题的解决
08-26
Spring Boot Vue 跨域问题的解决 跨域问题是指一个域名下的网页无法访问另一个域名下的资源，导致浏览器无法加载页面或出现安全警告。Spring Boot 和 Vue.js 是两个非常流行的技术栈，但是它们之间存在跨域问题。...
解决Vue调用springboot接口403跨域问题
10-16
主要介绍了解决Vue调用springboot接口403跨域问题,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
vue+springboot实现项目的CORS跨域请求
12-09
跨域资源共享CORS（Cross-...细节不在此赘述，任何简单的springboot项目就可以，而前端vue项目只需用axios发ajax请求即可。 我的demo里填写用户名和密码，然后点击登录按钮向后台发起登录请求，js代码如下： methods:{
SpringBoot+Vue前后端分离实现请求api跨域问题
08-19
"SpringBoot+Vue前后端分离实现请求api跨域问题解决方案" 在现代Web开发中，前后端分离是一种非常流行的架构模式，然而，在这种架构模式中，前端和后端之间的请求跨域问题便成了一个非常重要的问题。在这篇文章中，...
影视评论系统Springboot+Vue（前后端分离）
06-16
2. CORS跨域支持：Springboot设置CORS策略，允许Vue应用从不同源发起请求，解决跨域问题。 3. JWT令牌验证：通过JWT实现前后端的用户认证，前端在每次请求时携带令牌，后端验证其合法性。 四、数据库设计与SQL文件 ...
SpringBoot与Vue交互解决跨域问题【亲测已解决】，为你保驾护航
AUZKAY的博客
04-10 644
打开全栈工匠技能包-1小时轻松掌握SSR两小时精通jq+bs插件开发生产环境下如歌部署Node.js网易内部VUE自定义插件库NPM集成谁说前端不用懂安全，XSS跨站脚本的危害webpack的loader到底是什么样的？两小时带你写一个自己loader。
SpringBoot+Vue前后端分离跨域问题
Ssolitude123的博客
04-15 1138
什么是跨域问题 说到跨域，首先需要解释下为什么会出现这样的跨域问题。这其实都源于浏览器的同源策略。 同源策略是浏览器中的一个重要的安全策略，是Netscape公司在1995年引入。同源策略的作用就是为了限制不同源之间的交互，从而能够有效避免XSS、CSFR等浏览器层面的攻击。 同源指的是两个请求接口URL的协议(protocol)、域名(host)和端口(port)一致。 同源策略 比如以下例子： 同源与非同源接口 说到浏览器的攻击手段，XSS指的是恶意攻击者往Web页面里插入恶意HT
vue学习-10vue整合SpringBoot跨域请求
好看的皮囊千篇一律，有趣的灵魂万里挑一。
09-28 600
确保后端API的地址和端口与前端配置的axios baseURL 匹配，以确保请求被正确路由到后端。跨域请求通常发生在前端应用运行在不同的域名或端口上时，而后端服务运行在不同的域名或端口上。在上述示例中，我们配置了允许前端应用运行在http://localhost:8080上的跨域请求。你应该根据你的前端应用的实际地址进行配置。在Vue.js应用中的全局配置中，设置axios的baseURL，这将指定后端API的地址。在Vue.js应用中，确保使用了axios或其他HTTP库来发送请求，并进行相应的配置。
前后端分离spring boot+vue跨域问题
qq_43568790的博客
02-05 455
当出现跨域问题时 在spring boot项目中创建一个类 如下 package com.demo2.demo.config; import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.config.annotation.CorsRegistry; imp...
【已解决】记 Vue3+SpringBoot 前后端分离项目部署时的一次跨域问题
赵士杰——成功并非一蹴而就，而是在持之以恒的努力中逐渐实现。
08-21 714
问题背景是在一次部署开发环境时，由于是前后端分离项目（前端Vue3，后端SpringBoot），SpringBoot 使用 Docker 部署，前端访问服务接口时出现跨域问题。
前后端跨域请求代码实战（vue3.4+springboot2.7.18）
an_gentle_killer的博客
04-20 848
vue3，springboot跨域，WebMvcConfigurer，前后端跨域请求
springboot与vue解决跨域
06-28
### 回答1： Spring Boot与Vue解决跨域问题的方法有以下几种： 1. 在Spring Boot中配置跨域访问 可以在Spring Boot的配置文件中添加如下配置： ``` @Configuration public class CorsConfig { @Bean public WebMvcConfigurer corsConfigurer() { return new WebMvcConfigurerAdapter() { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") .allowedOrigins("*") .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS") .allowedHeaders("*") .allowCredentials(true) .maxAge(360); } }; } } ``` 这样就可以允许所有的跨域请求了。 2. 在Vue中配置代理 可以在Vue的配置文件中添加如下配置： ``` module.exports = { devServer: { proxy: { '/api': { target: 'http://localhost:808', changeOrigin: true, pathRewrite: { '^/api': '' } } } } } ``` 这样就可以将所有以/api开头的请求代理到Spring Boot的808端口上了。 3. 使用CORS插件 可以在Vue中使用CORS插件来解决跨域问题。可以使用如下代码： ``` import cors from 'cors'; app.use(cors()); ``` 这样就可以允许所有的跨域请求了。 ### 回答2： 在开发Web应用程序时，通常会涉及到多个域之间的交互，例如从前端Vue应用程序发送Ajax请求到后端Spring Boot应用程序时。但是，由于浏览器的同源策略，跨域请求将被拒绝。 解决跨域问题有许多方法，下面将讨论如何使用Spring Boot和Vue解决跨域问题。 首先，可以在Spring Boot应用程序的控制器类上添加@CrossOrigin注解来实现跨源请求。例如： ```java @RestController @RequestMapping("/api") @CrossOrigin public class MyRestController { //... 省略其他代码 } ``` 这将允许来自任何源的Ajax请求访问该控制器中的资源。 另一种解决跨域问题的方法是使用Vue中的代理。在Vue的config/index.js文件中，可以将代理配置如下： ```javascript module.exports = { dev: { proxyTable: { '/api': { target: 'http://localhost:8080', changeOrigin: true, pathRewrite: { '^/api': '', }, }, }, }, }; ``` 这将允许Vue应用程序向以“/api”开头的URL发出请求，并将其代理到Spring Boot应用程序的“http://localhost:8080”地址。changeOrigin选项设置为true将更改host头以匹配目标URL的主机。 最后，还可以将CORS配置添加到Spring Boot应用程序的配置类中。具体而言，可以将以下内容添加到@Configuration类中： ```java @Configuration public class MyConfig { @Bean public WebMvcConfigurer corsConfigurer() { return new WebMvcConfigurerAdapter() { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/api/**") .allowedOrigins("http://localhost:8081") .allowedMethods("GET", "POST") .allowedHeaders("*") .allowCredentials(true) .maxAge(3600); } }; } } ``` 这将允许来自“http://localhost:8081”地址的Ajax请求访问以“/api”开头的URL，并允许使用GET和POST方法。还可以指定允许所有标头，并设置允许凭据和缓存生存期。 总之，Spring Boot和Vue都提供了多种解决跨域问题的方法。选择适合自己的方法，可以使应用程序更加健壮和可扩展。 ### 回答3： 随着Web技术不断发展，很多网站和应用需要同时使用多个不同的域名，这就产生了跨域问题。跨域问题的解决方法有很多种，其中比较流行的方式是使用SpringBoot和Vue。 首先，我们需要明确什么是跨域。跨域是指一个网站访问另一个域名下的资源时，由于浏览器的同源策略限制，会导致访问失败。例如，一个网站（域名为A）要访问另一个网站（域名为B）的数据，由于B网站与A网站域名不同，浏览器会拒绝此次访问。因此，我们需要使用SpringBoot和Vue解决跨域问题。 使用SpringBoot解决跨域问题： SpringBoot提供了解决跨域问题的方式，只需要在Controller中添加@CrossOrigin注解即可。例如： ``` @RestController @RequestMapping("/api") @CrossOrigin(origins = "*", maxAge = 3600) public class ApiController { //... } ``` 其中，@CrossOrigin注解的origins属性指定允许跨域访问的源地址，*代表允许任何源地址访问；maxAge属性指定允许访问的时间，单位为秒。 使用Vue解决跨域问题： Vue可以使用axios库发送HTTP请求，实现跨域访问。在axios发送请求时，我们需要设置请求头，告诉服务器允许跨域访问。例如： ``` import axios from 'axios' axios.defaults.baseURL = 'http://localhost:8080/api' axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8' axios.defaults.headers.common['Access-Control-Allow-Origin'] = '*' export default { getList (params) { return axios.post('/list', params) }, //... } ``` 其中，axios.defaults.headers.common['Access-Control-Allow-Origin'] = '*'设置了允许跨域访问的源地址为*，代表任何源地址均可访问。 综上所述，SpringBoot和Vue都提供了解决跨域问题的方式，我们只需要按照要求设置相应参数即可。这样，我们就能够轻松实现跨域访问，提高我们的开发效率。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值