位置: IT常识 - 正文

解决SpringBoot和前端Vue的跨域问题(springboot比spring做了哪些改进)

编辑:rootadmin
解决SpringBoot和前端Vue的跨域问题 一、为什么会出现跨域问题  

推荐整理分享解决SpringBoot和前端Vue的跨域问题(springboot比spring做了哪些改进),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:spring springboot 区别,springboot比spring做了哪些改进,springboot相比spring,springboot的坑,spring,springboot,springboot的坑,springboot比spring做了哪些改进,springboot区别,内容如对您有帮助,希望把文章链接给更多的朋友!

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

二、什么是跨域?

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

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

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

类似于如下:

三、常见的跨域场景 

四、如何解决跨域?

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)使用下列方法之一:

headgetpost解决SpringBoot和前端Vue的跨域问题(springboot比spring做了哪些改进)

(2)请求的Heder是

AcceptAccept-LanguageContent-LanguageContent-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协议的服务器上才能正常工作。       

属性:

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

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

前端代码:var xhr = new XMLHttpRequest();// 前端开关:浏览器是否读写cookiexhr.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,重启之后即可实现跨域访问,前端无需再配置跨域。

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;@Configurationpublic 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用来请求数据,封装的代码如下:

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:

// 跨域配置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.jiuchutong.com/zhishi/299064.html 转载请保留说明!

上一篇:【微信小程序】自定义组件(一)(微信小程序在哪里打开)

下一篇:文本生成图像工作简述2--常用数据集分析与汇总(文本生成图像前景怎么样)

  • 应收款和应付款对抵
  • 自然人系统怎么申报个人所得税
  • 增值税有留底怎么减少留底
  • 进料加工余料结转可以跨年吗
  • 事业单位存货发生盘亏或盘盈处理
  • 服务类公司没有营业执照
  • 工程围挡做法
  • 不能抵扣的普通发票
  • 专项补助资金补助的领域包括
  • 工程预付款的规定
  • 公司发年终奖怎么发朋友圈
  • 高新技术企业技术转让所得
  • 建筑行业异地预缴
  • 发票上的备注怎么填写步骤
  • 成立分公司总公司有什么影响
  • 税务局代增值税专用发票盖什么章
  • 汇算清缴时资产总额如何计算
  • 税务局拍卖资产
  • 定额发票验旧是什么意思
  • 纳税人提供植物油的税率
  • 私立医院适用什么法律
  • 车船税计入什么费用
  • 计提税金和缴纳税金的会计分录
  • 资本结构理论有哪些类型
  • 现金折扣税务会计
  • 免征的税额当月计入营业外收入吗
  • 海关进口增值税和关税怎么入账
  • linux系统怎么安装网卡驱动
  • 电脑网卡介绍
  • 公司抵押贷款的担保人
  • 最新专业版win10
  • 销售折让负数发票如何入账
  • 如何在Mac上更改我的Apple ID
  • 另一种答案
  • 期票是不是承兑汇票
  • 如何计算企业所得税税负
  • 待摊费用和预提费用改为什么科目了
  • 农民影视2023 最新版
  • 暂估入账的原材料有成本差异吗
  • 跨年度退货
  • 建安企业账务处理 工程施工
  • elementui 手机端
  • thinkphp怎么用
  • 定期存款应计入会计哪个科目
  • 工会经费,残保金,会计分录
  • 政府补贴什么时候开始的
  • 怎样合理的运用网络
  • 在ubuntu中安装win10
  • 上市公司收购其它公司是好是坏
  • 企业所得税的纳税调整项和比例
  • 加计扣除减免政策
  • 出租机械设备
  • 一台设备分期开票数量
  • 会计已入账是什么意思
  • 现金折扣与商业折扣的计算
  • 营改增后建筑业怎么开票
  • 企业清算状态还要报税吗
  • 以前年度调整要更正申报吗
  • 销售已经使用过的固定资产税率
  • 年初建账的期初余额
  • 旅游饮食服务企业会计核算的特点包括
  • 金融企业借款费用扣除比例
  • bulk insert formatfile
  • 苹果电脑如何查看WiFi密码
  • 浏览器8系统怎么打不开主页
  • linux ssh rsa
  • igfxem是什么软件
  • kvm支持的系统
  • Win10 Mobile 10586无法更新应用怎么办 一招教你解决
  • windows10无法安装
  • win10用户账户guest
  • opengl编程语言
  • typescript尖括号
  • javascript typeof id==='string'?document.getElementById(id):id解释 原创
  • unity公路制作
  • 详解node HTTP请求客户端 - Request
  • linux更改
  • python用matplot画图
  • 我国国家治理体系是一整套什么的国家制度
  • 关于车辆购置税的规定,下列说法正确的是
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设