解决SpringBoot和前端Vue的跨域问题

这篇具有很好参考价值的文章主要介绍了解决SpringBoot和前端Vue的跨域问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、为什么会出现跨域问题  

        出于浏览器的同源策略限制。同源策略(Sameoriginpolicy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的。javascript脚本和另外一个域的内容进行交互。所谓同源(即指在同一个域)就是两个页面具有相同的协议(protocol),主机(host)和端口号(port)。

二、什么是跨域?

        要了解什么是跨域,我们先说一下同源的概念。同源,是指协议、域名、端口都相同。

        例如:http://192.168.0.1:8080与https://192.168.3.1:8080不是同源,因为协议不同,第一个冒号前面的为协议,中间的为域名,第二个冒号后面的为端口,只要满足有一处不同,则就不是同源。

        所谓跨域就是从 A 向 B 发请求,如若他们的地址协议、域名、端口都不相同,直接访问就会造成跨域问题,跨域是非常常见的现象!请求是跨域的但并不一定会报错,普通的图片请求。css文件请求是不会报错的。报错的条件是浏览器的同源策略,且发送Ajax请求,跨域是客户端问题。

类似于如下:

解决SpringBoot和前端Vue的跨域问题

三、常见的跨域场景 

解决SpringBoot和前端Vue的跨域问题

四、如何解决跨域?

1.JSONP
       jsonp的原理就是利用<script>标签没有跨域限制,通过<script>标签src属性,发送带有callback参数的GET请求,服务端将接口返回数据拼凑到callback函数中,返回给浏览器,浏览器解析执行,从而前端拿到callback函数返回的数据。

jsonp的缺点:只能发送get一种请求。

2.CORS

        CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing)。
它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制。
CORS需要浏览器和服务器同时支持。目前,所有浏览器都支持该功能,IE浏览器不能低于IE10。
  浏览器将CORS跨域请求分为简单请求和非简单请求。
  只要同时满足一下两个条件,就属于简单请求
(1)使用下列方法之一:

  • head
  • get
  • post

(2)请求的Heder是

  • Accept
  • Accept-Language
  • Content-Language
  • Content-Type: 只限于三个值:application/x-www-form-urlencoded、multipart/form-data、text/plain

不同时满足上面的两个条件,就属于非简单请求。浏览器对这两种的处理,是不一样的。

3.nginx反向代理接口跨域
        可以将前端项目部署到和接口同源的当前本地的服务器上。在vue.config.js 中进行代理配置,假设当我访问 http://localhost:9528/api/login 时会转换为间接访问 http://localhost:3000/api/login

devServer: {
    // 其他代码省略。。。。。
    
    // 代理配置
    proxy: {
      // 代理服务器,当请求的网址是http://localhost:3000的时候,会转成http://192.168.80.115:3000
      // /api 是 看接口文档所写的,每当访问本地的/api接口时,会转化为访问真实的服务器
      '/api': {
        target: 'http://localhost:3000' // 我们要代理的真实接口地址
      }
    }

 4.web sockets
        它是一种浏览器的API,它的目标是在一个单独的持久连接上提供全双工、双向通信。(同源策略对web sockets不适用)web sockets原理:在JS创建了web socket之后,会有一个HTTP请求发送到浏览器以发起连接。取得服务器响应后,建立的连接会使用HTTP升级从HTTP协议交换为web sockt协议。 只有在支持web socket协议的服务器上才能正常工作。       

属性:

解决SpringBoot和前端Vue的跨域问题

5.node.js中间件代理跨域

  node中间件实现跨域代理,原理大致与nginx相同,都是通过启一个代理服务器,实现数据的转发,也可以通过设置cookieDomainRewrite参数修改响应头中cookie中域名,实现当前域的cookie写入,方便接口登录认证。
1)非vue框架的跨域
  使用node + express + http-proxy-middleware搭建一个proxy服务器。

  • 前端代码:
    var xhr = new XMLHttpRequest();
     
    // 前端开关:浏览器是否读写cookie
    xhr.withCredentials = true;
     
    // 访问http-proxy-middleware代理服务器
    xhr.open('get', 'http://www.domain1.com:3000/login?user=admin', true);
    xhr.send();
  • 中间件服务器代码:
    var express = require('express');
    var proxy = require('http-proxy-middleware');
    var app = express();
     
    app.use('/', proxy({
        // 代理跨域目标接口
        target: 'http://www.domain2.com:8080',
        changeOrigin: true,
     
        // 修改响应头信息,实现跨域并允许带cookie
        onProxyRes: function(proxyRes, req, res) {
            res.header('Access-Control-Allow-Origin', 'http://www.domain1.com');
            res.header('Access-Control-Allow-Credentials', 'true');
        },
     
        // 修改响应信息中的cookie域名
        cookieDomainRewrite: 'www.domain1.com'  // 可以为false,表示不修改
    }));
     
    app.listen(3000);
    console.log('Proxy server is listen at port 3000...');
     

2)vue框架的跨域
  node + vue + webpack + webpack-dev-server搭建的项目,跨域请求接口,直接修改webpack.config.js配置。开发环境下,vue渲染服务和接口代理服务都是webpack-dev-server同一个,所以页面与代理接口之间不再跨域。
webpack.config.js部分配置:

module.exports = {
    entry: {},
    module: {},
    ...
    devServer: {
        historyApiFallback: true,
        proxy: [{
            context: '/login',
            target: 'http://www.domain2.com:8080',  // 代理跨域目标接口
            changeOrigin: true,
            secure: false,  // 当代理某些https服务报错时用
            cookieDomainRewrite: 'www.domain1.com'  // 可以为false,表示不修改
        }],
        noInfo: true
    }
}

五、SpringBoot跨域问题的解决

在Springboot项目里加上这个配置文件CorsConfig.java,重启之后即可实现跨域访问,前端无需再配置跨域。

解决SpringBoot和前端Vue的跨域问题

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;

@Configuration
public class CorsConfig {

    // 当前跨域请求最大有效时长。这里默认1天
    private static final long MAX_AGE = 24 * 60 * 60;

    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.addAllowedOrigin("*"); // 1 设置访问源地址
        corsConfiguration.addAllowedHeader("*"); // 2 设置访问源请求头
        corsConfiguration.addAllowedMethod("*"); // 3 设置访问源请求方法
        corsConfiguration.setMaxAge(MAX_AGE);
        source.registerCorsConfiguration("/**", corsConfiguration); // 4 对接口配置跨域设置
        return new CorsFilter(source);
    }
}

 六、前端跨域解决

request.js用来请求数据,封装的代码如下:

解决SpringBoot和前端Vue的跨域问题

import axios from 'axios'

const request = axios.create({
	baseURL: '/api',  // 注意!! 这里是全局统一加上了 '/api' 前缀,也就是说所有接口都会加上'/api'前缀在,页面里面写接口的时候就不要加 '/api'了,否则会出现2个'/api',类似 '/api/api/user'这样的报错,切记!!!
    timeout: 5000
})

// request 拦截器
// 可以自请求发送前对请求做一些处理
// 比如统一加token,对请求参数统一加密
request.interceptors.request.use(config => {
    config.headers['Content-Type'] = 'application/json;charset=utf-8';
  
 // config.headers['token'] = user.token;  // 设置请求头
    return config
}, error => {
    return Promise.reject(error)
});

// response 拦截器
// 可以在接口响应后统一处理结果
request.interceptors.response.use(
    response => {
        let res = response.data;
        // 如果是返回的文件
        if (response.config.responseType === 'blob') {
            return res
        }
        // 兼容服务端返回的字符串数据
        if (typeof res === 'string') {
            res = res ? JSON.parse(res) : res
        }
        return res;
    },
    error => {
        console.log('err' + error) // for debug
        return Promise.reject(error)
    }
)


export default request

vue.config.js:

解决SpringBoot和前端Vue的跨域问题

// 跨域配置
module.exports = {
    devServer: {                //记住,别写错了devServer//设置本地默认端口  选填
        port: 9876,
        proxy: {                 //设置代理,必须填
            '/api': {              //设置拦截器  拦截器格式   斜杠+拦截器名字,名字可以自己定
                target: 'http://localhost:9999',     //代理的目标地址
                changeOrigin: true,              //是否设置同源,输入是的
                pathRewrite: {                   //路径重写
                    '^/api': ''                     //选择忽略拦截器里面的内容
                }
            }
        }
    }
}

七、前后端都跨域 

如果后端设置了跨域配置,则使用下面的request.js 代码:

import axios from 'axios'

const request = axios.create({
	baseURL: 'http://localhost:9090',  // 注意!! 这里是全局统一加上了 后端接口前缀 前缀,后端必须进行跨域配置!
    timeout: 5000
})

// request 拦截器
// 可以自请求发送前对请求做一些处理
// 比如统一加token,对请求参数统一加密
request.interceptors.request.use(config => {
    config.headers['Content-Type'] = 'application/json;charset=utf-8';
  
 // config.headers['token'] = user.token;  // 设置请求头
    return config
}, error => {
    return Promise.reject(error)
});

// response 拦截器
// 可以在接口响应后统一处理结果
request.interceptors.response.use(
    response => {
        let res = response.data;
        // 如果是返回的文件
        if (response.config.responseType === 'blob') {
            return res
        }
        // 兼容服务端返回的字符串数据
        if (typeof res === 'string') {
            res = res ? JSON.parse(res) : res
        }
        return res;
    },
    error => {
        console.log('err' + error) // for debug
        return Promise.reject(error)
    }
)


export default request

⛵小结

以上就是对解决SpringBoot和前端Vue的跨域问题简单的概述,现在我们的项目就更加的趋于完美了,也提升了我们对于编程的能力和思维!

如果这篇文章有帮助到你,希望可以给作者点个赞👍,创作不易,如果有对后端技术、前端领域感兴趣的,也欢迎关注 ,我将会给你带来巨大的收获与惊喜💝💝💝!文章来源地址https://www.toymoban.com/news/detail-444162.html

到了这里,关于解决SpringBoot和前端Vue的跨域问题的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • node+vue+express开发环境下接口数据传递中的跨域问题

    大部分浏览器自带的保护措施,限制用户在一个域名下请求另一个域名的数据 跨域对于前后端开发者来说,就像一块狗皮膏药,无论是面试还是开发中,都会经常遇到。 之所以出现跨域问题,是因为浏览器的同源策略,为了隔离潜在的恶意文件,为了防御来自歪门邪道的攻

    2024年02月19日
    浏览(38)
  • 解决系统开发中的跨域问题:CORS、JSONP、Nginx

    本博客配套的源码在这里 最近我在做一个系统的全栈开发,遇到了这样一个问题。 首先,我的前端是一个来自百度的开源框架——Amis,它封装自React.js,基于JSON配置。我下载了Amis提供的SDK文件夹,并进行了代码开发。但是我在部署整个系统的时候遇到了跨域问题。原因是,

    2024年01月20日
    浏览(58)
  • vue2跨域问题解决[前端方法]

    前端项目中常见的跨域报错如下: Access to XMLHttpRequest at \\\'https://xxx.com/ms/\\\' from origin \\\'http://10.23.30.135:8080\\\' has been blocked by CORS policy: No \\\'Access-Control-Allow-Origin\\\' header is present on the requested resource. 针对这种跨域的报错我们可以通过后端设置 Access-Control-Allow-Origin 的header来解决,但一般

    2024年02月08日
    浏览(53)
  • 解决Spring Boot前后端分离开发模式中的跨域问题

    在实际开发中,经常会遇到前端Vue应用与后端Spring Boot API接口存在跨域访问的问题。本篇博客将分享解决Spring Boot前端Vue跨域问题的实战经验,帮助开发者快速解决该问题。 跨域问题是由于浏览器的同源策略引起的。同源策略限制了从一个源加载的文档或脚本如何与来自另一

    2024年02月10日
    浏览(110)
  • Springboot+vue跨域+登录拦截问题,前端获取不到session,每次请求sessionid变化

    折磨了整整两天,终于把这个问题搞定了. 一开始后端开发完后,用apifox所有接口测试都是可以的,但当前端跑起来后发现接收不到后端的数据. 网上查了很多方法,首先试了查到的前端代理方法 没用,代理配置了但api不会替换成设置好的代理,还是以字符串形式到相对路径上. 于是找

    2024年01月19日
    浏览(35)
  • 最新版本chrome浏览器出现的跨域问题及解决方案

    最近将chrome浏览器更新到了最新版本 ,在个别网站上出现了跨域访问问题。 目录 解决办法: (1)增加参数配置代码 (2)重新打开浏览器 在桌面快捷方式中右键》属性》快捷方式中的目标后面加入以下参数配置代码 注意:其中chrome.exe与--disable之间有一个空格 然后重新打

    2024年02月06日
    浏览(65)
  • Spring Security系列教程之解决Spring Security环境中的跨域问题

    一. 启用Spring Security 的CORS支持 1. 普通的跨域 方式1:在接口方法上利用@CrossOrigin注解解决跨域问题 方式2:通过实现WebMvcConfigurer接口来解决跨域问题 二. Spring Security环境下的跨域问题解决 通过上面的配置,我们已经解决了Ajax的跨域请求问题,但是这个案例中也有潜在的威胁

    2024年02月05日
    浏览(51)
  • Vite+Vue3项目如何获取环境配置,并解决前端跨域问题

    根目录新建.env.development和.env.production文件 package.json配置启动参数 vite命令启动项目时,指定mode参数,加载vite.config.ts文件。 配置代理 在vite.config.ts中配置代理 配置vite-plugin-html 通过vite-plugin-html组件,可以将配置文件中的数据,绑定到index.html中,可以实现不同环境的页面ti

    2024年02月19日
    浏览(66)
  • 拓展边界:前端世界的跨域挑战

    目录 什么是跨域 概念 同源策略及限制内容 常见跨域场景 如何解决跨域 CORS Nginx代理跨域 Node中间件代理跨域 WebSocket postMessage JSONP 其他 概念 在此之前,我们了解一下一个域名地址的组成: 跨域指的是在网络安全中,由于浏览器的同源策略(Same-Origin Policy)限制,当一个网

    2024年01月21日
    浏览(48)
  • 记:vite3+vue3+axios前端项目跨域问题解决【前端和服务器nginx配置】

    前言:什么是跨域,网上一搜一大把,所以这里直接跳过,直入主题。 处理方式:不通过后端处理跨域,通过前端+服务器nginx处理。 1.前端涉及处理跨域的必要配置(开发环境、生产环境):vite3、vue3、axios 2.服务器涉及处理跨域的配置(生产环境):nginx【主要用到其配置

    2024年02月01日
    浏览(61)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包