springboot+vue 跨域问题，浏览器报错已拦截跨源请求

最新推荐文章于 2024-11-08 20:05:58 发布
最新推荐文章于 2024-11-08 20:05:58 发布
阅读量1.6k 收藏
点赞数
分类专栏： java 文章标签： 区块链 vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/leaning_java/article/details/121657532
版权

springboot+vue 跨域问题
浏览器报错：【已拦截跨源请求：同源策略禁止读取位于 https://aixiaosheng.oss-cn-beijing.aliyuncs.com/dae/article/d540bef20a3742a6a7e47936a5664bd6.png 的远程资源。（原因：CORS 头缺少 ‘Access-Control-Allow-Origin’）】
在这里插入图片描述解决办法1：在需要要跨域的类或者方法上加上@CrossOrigin注解
解决办法2：在这里插入图片描述

springboot项目已阻止跨源请求:同源策略、NET::CERT_COMNON_NAME_INVALID
qq_48922481的博客
04-18 2335
跨域报错： 一、已阻止跨源请求:同源策略 在后端配置cors，请求头设置为*，所有都允许 二、Network error错误 1、request请求的https，若是填写了http会报错，本地是http，服务器是https，很多人很容易忽视这个问题。 ServerIP配置错误，需要把config.js里的IP替换成网址，不然就会发生错误。嫌麻烦不要用172.12.2.2这类的，需要配置，你使用什么网址就用什么网址。 ...
vue+Springboot使用axios进行http请求出现跨域问题
weixin_45655275的博客
01-04 1927
已拦截跨源请求：同源策略禁止读取位于 http://localhost:8888/loginF 的远程资源。（原因：CORS 预检通道未成功）。 vue+Springboot使用axios进行http请求出现跨域问题 在使用vue和springboot在一台电脑进行开发时，即使端口不一样，也会跨域的问题，刚入门vue时，会奇怪这个问题，网上博客都会有相应的解决方案，我最近也是学vue，出现跨域问题...
vue项目中已拦截跨源请求：同源策略禁止读取位于....（原因：CORS 请求未能成功）解决方案
南风花海的博客
06-15 6552
手动给Global.asax配置，添加如下方法 最后记得退出所有终端，重新进入终端即可解决跨域报错问题。
【异常】前端vue后端Node.js报错“已拦截跨源请求：同源策略禁止读取位于 http:** 的远程资源。（原因：CORS 头缺少 ‘Access-Control-Allow-Origin‘）”
二木成林
10-31 4222
错误 在本次错误发生的项目中，前端使用vue写的，然后使用axios发送请求，后端使用的Node.js。 原因 发生跨域请求，需要解决跨域问题。 解决 具体可以参考这篇博客，针对的后端是Node.js的情况。 由于本人现阶段不会Node.js，所以给出的解决只是照猫画虎，能解决就用。 在index.js添加下面红框中的三行代码，就可以成功访问了。 运行的时候可能报“Error: Cannot find module 'cors'“，不能找到相关模块，使用npm install命令安装
springboot 与前端交互 已拦截跨源请求
fwk19840301的博客
03-10 5042
一、springboot 与前端交互  已拦截跨源请求火狐报错:谷歌报错：具体症状： 确定前端没问题解决方式RestController @RequestMapping("/infoUsers") @CacheConfig(cacheNames = "infoUsers") //就是一个注解的事 @CrossOriginpublic class InfoUserController { @...
springboot+vue项目从第一行代码到上线部署全流程
2301_82067992的博客
11-08 5737
本文帮助大家快速打通Springboot+Vue项目的全栈流程，详细讲述了前后端交互过程和项目部署项目上线的步骤，希望可以帮助到大家
springboot+vue集成cas单点登录最详细避坑版讲解
zwjzone的博客
09-04 2745
本地讲解的是单纯的cas，不掺和springsecurity或者shiro等权限框架cas默认不支持前端分离的，这个后便会讲到，也是最大问题所在；前端vue不能直接访问后端接口，否则会报错跨域，即使后端已经配置了跨域，因为cas拦截器的级别太高了；网上有很多解决方法，一般分为两种，一种是引入独立的cas包，也就是，第二种就是映入springboot的包，也就是，注意区分，本文重点讲的第二种方式；另外就是，cas版本不一样，很多配置项也会发生变化，如果不生效，看看是否版本问题。
开发博客系统SpringBoot+Vue教程
fhzmWJ的博客
05-15 2416
个人的开发挑战计划1
vue+springboot前后端分离实现单点登录跨域问题解决方法
08-28
Vue+SpringBoot前后端分离实现单点登录跨域问题解决方法 单点登录概述 单点登录（Single Sign-On，SSO）是指用户只需登录一次，即可访问所有相关的应用系统，而不需要在每个系统中重复登录。这种机制可以提高用户...
云E办Springboot+vue——前端项目完整版（含源码）
热门推荐
涵盖了计算机专业基础知识、数学建模相关实践、复杂网络论文研究、LeetCode算法刷题经验、C语言开发经验、前端Vue、React框架开发实战相关知识
08-10 5万+
本项目基于Vue+Spring Boot构架一个前后端分离项目。前端使用社区非常活跃的开源框架vue进行构建。受疫情的影响，许多企业由线上办公转为线下办公。随着线上办公的人数的增多，线上办公的优点逐步凸显：通过实现工作流程的自动化、节省企业办公费用、实现绿色办公，同时提升办公效率。前端使用的技术有： Vue、Vue-cli、Vuex、VueRouter、ElementUI、Axios、ES6、Webpack、WebSocket、font-awesome、js-file-download、vue-chat 项
已拦截跨源请求：同源策略禁止读取位于 http://xxx...aliyuncs.com/ 的远程资源。（原因：CORS 头缺少 ‘Access-Control-Allow-Origin‘)
H_define的博客
05-08 3490
进入阿里云官网，进入OSS控制台，在Bucket 列表中选择你使用的Bucket。点击左侧的数据安全，跨域设置，创建跨域规则。原因：在阿里云终端没有设置跨域规则。再次尝试上传文件，成功。
【已解决】已拦截跨域请求：同源策略禁止读取位于接口的远程资源：原因：CORS缺少Access-Contorl-Allow-Origin
~牧马~
11-12 1万+
前后端开发跨域问题问题记录前端新手配置：有问题老手配置：正常后端新手配置：有问题老手配置：正常总结 问题记录 今天笔者有一次遇到前后端跨域问题，下面小编详细的记录下整个过程： 环境是：后端在公司，前端在远程，两人协同开发 后端写好接口，并发布在外网后，接下来就是远程前端的对接接口阶段，前端在配置接口时，配置成功，在测试访问时，浏览器报“已拦截跨域请求：同源策略禁止读取位于接口的远程资源：原因：CORS缺少Access-Contorl-Allow-Origin”问题，错误提示是“cors跨域问题”，后端看到只
解决：403错误 和 已拦截跨源请求：同源策略禁止读取位于localhost:8080/xxx/xx的远程资源。（原因：CORS 头缺少 ‘Access-Control-Allow-Origin‘）。
Jav
10-09 3492
问题描述：在使用vue框架进行前后端分离开发时，同时使用springboot框架，ajax发送请求时出现上述问题 解决思考： 分析：我们先打开浏览器的开发者工具 控制台输出错误信息，上网查阅（原因：CORS 头缺少 ‘Access-Control-Allow-Origin’）可以知道是大概率是跨域问题 再查看网络部分（先打开开发者模式，在点击按钮或者其他提交表单的操作）看到一个403状态码的失败网络请求，查看详细url路径等信息 一般403的错误有两类原因： 跨域问题 我们可以..
已拦截跨源请求：同源策略禁止读取位于 http://....../test.do 的远程资源。（原因：CORS 头缺少 'Access-Control-Allo
谬也的博客
03-30 3433
访问后端接口时，报错如下： 同源是指：域名、协议、端口相同 解决方案一： 在对应方法上加注解：@CrossOrigin(origins = “*”) 加后可以正常获得接口数据： 附前端测试代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &lt...
SSM+Vue面对的跨域问题
二木成林
01-18 1118
错误 已拦截跨源请求：同源策略禁止读取位于 http://localhost:8181/findTags 的远程资源。（原因：CORS 头缺少 'Access-Control-Allow-Origin'）。 原因 前端使用vue技术，后端使用SSM技术，前后端分离，代码都是单独写的，所以发生了跨域问题。 前端服务器的地址为：http://localhost:8080/#/ 后端服务器的地址为：http://localhost:8181/#/ 两个源的端口号不同，属于端口跨域，所以需要解决这
已拦截跨源请求：同源策略禁止读取远程资源，不允许有多个或缺少Access-Control-Allow-Origin CORS头
Jancoyan
08-23 1437
Vue + SpringBoot开发移动端app 问题：无法跨源进行请求，不允许有多个CORS头 解决方案：后端添加过滤器，开放远程资源的读取 /** * @Author: Jancoyan * @Date: 2021/8/23 * @Description: * @Version: 1.0 */ package com.jancoyan.commentset.config; import org.springframework.web.servlet.HandlerInterceptor;
springboot+vue跨域请求使用方法
凡尘
11-02 594
也就是说跨域的本质是靠Http的Header头中的Access-Control-Allow-Origin来实现跨域的。已拦截跨源请求：同源策略禁止读取位于 http://localhost:8080/的远程资源。浏览器出于安全的考虑，使用 XMLHttpRequest对象发起 HTTP请求时必须遵守同源策略。前台的一个Axios请求打进来，要访问后台Tomcat服务器Restful接口。在前后端分离的项目中，前台一个服务，后台一个服务。IP不同或者端口号不同就是跨域。在默认的情况下跨域是被禁止。
浏览器拦截跨域请求处理方法(已阻止跨源请求:同源策略禁止读取远程资源) 原文地址：http://my.oschina.net/lichaoqiang/blog/317823 在浏览器请求中，出现跨
zywglove的博客
12-31 2841
浏览器拦截跨域请求处理方法(已阻止跨源请求:同源策略禁止读取远程资源) 原文地址：http://my.oschina.net/lichaoqiang/blog/317823 在浏览器请求中，出现跨域访问资源的问题，我们肯定会遇到。如果跨域请求被阻止，有可能导致css、js 、ajax请求、font字体等资源出现无法正常访问的问题。接下来，就介绍下解决同源策略不允许读取远程资源的
已拦截跨源请求：同源策略禁止读取位于 http://localhost:****的远程资源。（原因：CORS 头缺少 ‘Access-Control-Allow-Origin)
qq_29864549的博客
05-07 2903
在使用Vue连接后台功能时，页面按钮触发出现这个问题 这是由于跨域的问题引发的可以在后台相应的controller层上加上@CrossOrigin注解就可以解决
springboot项目为什么谷歌页面和其他浏览器页面打开不一样
最新发布
03-09
<think>嗯，用户问的是为什么Spring Boot项目在谷歌浏览器和其他浏览器打开时显示不一样。首先，我需要确认用户可能遇到的具体问题，比如页面样式不同、布局错乱，或者功能异常。可能的原因有很多，我需要一一分析。 首先想到的是浏览器兼容性问题。不同的浏览器对HTML、CSS和JavaScript的解析可能有差异。比如，某些CSS属性在Chrome和Firefox中表现不同，或者JavaScript API的支持程度不一样。这时候需要检查代码中是否有使用特定浏览器的前缀或特性。 然后，缓存问题也是一个常见原因。浏览器可能会缓存旧的CSS或JS文件，导致新修改没有生效。这时候需要清除缓存或者强制刷新（Ctrl+F5）来测试。 接下来，前端框架或库的版本兼容性。如果项目用了Bootstrap、Vue等框架，不同浏览器可能对某些版本支持不一致。需要确认使用的库是否跨浏览器兼容，并查看是否有已知问题。 还有可能是HTML/CSS语法错误。某些浏览器可能对错误的容忍度较高，而其他浏览器则严格解析，导致显示差异。使用W3C验证工具检查代码是否正确。 响应式设计问题也可能导致差异。不同浏览器的视口处理或媒体查询可能有细微差别，需要检查响应式布局是否适配所有目标浏览器。 另外，字体或资源的加载问题。如果某些浏览器无法加载特定字体或资源，可能导致样式异常。检查控制台是否有404错误或网络请求失败。 还有可能是浏览器扩展或插件的影响。比如广告拦截器或脚本管理器可能拦截了部分资源，导致功能异常。可以尝试在无痕模式下访问，排除插件干扰。 最后，检查后端是否有浏览器检测逻辑，导致返回不同的内容。比如根据User-Agent头返回不同页面，这需要审查后端代码。 总结下来，解决步骤大致是：检查控制台报错，验证HTML/CSS，清除缓存，测试无痕模式，对比浏览器特性支持，逐步排查可能的原因。需要用户提供更多具体现象，比如错误信息或截图，才能更精准定位问题。</think>Spring Boot项目在谷歌浏览器和其他浏览器（如Firefox、Edge等）中显示不一致的现象，通常与浏览器本身的渲染机制、兼容性策略或前端代码适配有关。以下是逐步分析及解决方案： --- ### **一、核心原因分析** 1. **浏览器渲染引擎差异** - **Chrome**：使用`Blink`引擎，对CSS3/HTML5支持较激进。 - **Firefox**：使用`Gecko`引擎，严格遵循W3C标准。 - **Edge/Safari**：分别使用`EdgeHTML`（旧版）或`Blink`（新版）和`WebKit`。 - *表现差异*：同一段CSS/HTML在不同引擎下可能呈现不同效果。 2. **CSS兼容性问题** - 部分CSS属性需添加浏览器前缀： ```css /* Chrome/Safari */ -webkit-transition: all 0.3s; /* Firefox */ -moz-transition: all 0.3s; /* 标准写法 */ transition: all 0.3s; ``` - 未正确使用`autoprefixer`等工具时，可能导致样式失效。 3. **JavaScript API支持差异** - 例如：`fetch()`在旧版IE中不支持，而现代浏览器均支持。 - 解决方案：使用`axios`库或添加`polyfill`。 4. **缓存未更新** - 浏览器可能缓存旧版CSS/JS文件，导致修改未生效。 --- ### **二、定位问题步骤** 1. **打开浏览器开发者工具** - **Chrome/Firefox**：按`F12`，检查`Console`和`Network`标签： - 查看是否有404错误（资源加载失败）。 - 检查CSS/JS文件是否被正确加载。 - 示例问题： ![控制台报错](https://via.placeholder.com/300x100/FF0000/FFFFFF?text=404+Not+Found) 2. **验证HTML/CSS语法** - 使用[W3C验证工具](https://validator.w3.org/)检查代码规范性。 3. **对比浏览器表现** - 在多个浏览器中按`Ctrl+F5`强制刷新，排除缓存干扰。 - 检查布局差异是否由`flexbox`或`grid`特性导致。 --- ### **三、常见解决方案** 1. **标准化前端代码** - 使用`Normalize.css`重置浏览器默认样式： ```html <link href="https://cdn.jsdelivr.net/npm/normalize.css@8.0.1/normalize.min.css" rel="stylesheet"> ``` 2. **自动添加CSS前缀** - 在构建工具（如Webpack）中配置`PostCSS`： ```javascript // postcss.config.js module.exports = { plugins: [require('autoprefixer')] }; ``` 3. **处理浏览器缓存** - 在引用资源时添加版本号： ```html <link href="/styles.css?v=1.2.3" rel="stylesheet"> ``` 4. **特性检测代替浏览器嗅探** - 使用`Modernizr`检测浏览器功能支持： ```javascript if (Modernizr.flexbox) { // 支持flexbox } else { // 降级方案 } ``` --- ### **四、Spring Boot相关注意事项** 1. **模板引擎缓存** - 在`application.properties`中关闭Thymeleaf缓存（开发环境）： ```properties spring.thymeleaf.cache=false ``` 2. **静态资源路径** - 确保静态资源（CSS/JS）位于`src/main/resources/static`目录。 3. **跨域问题（CORS）** - 如果使用AJAX，需配置后端CORS： ```java @Configuration public class WebConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**").allowedOrigins("*"); } } ``` --- ### **五、验证修复效果** 1. 使用[BrowserStack](https://www.browserstack.com/)在多浏览器中测试。 2. 确保控制台无报错且布局一致。 --- **总结**：Spring Boot项目本身不直接导致浏览器差异，问题通常出在前端代码的兼容性或浏览器特性支持上。通过标准化CSS、添加前缀、更新缓存策略和彻底测试，可有效解决显示不一致问题。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值