本地环境的CORS跨域之我真鸡贼

最新推荐文章于 2025-04-24 14:36:08 发布
最新推荐文章于 2025-04-24 14:36:08 发布
阅读量778 收藏
点赞数
分类专栏： 前端 文章标签： javascript vue.js 前端 跨域 CORS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_45799833/article/details/122014182
版权
本文记述了一位开发者在本地环境中遇到的神秘跨域问题及其解决过程。问题表现为请求地址为127.0.0.1:8080时出现跨域问题，但通过简单调整URL格式即得以解决。

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

在本地环境开发项目时，遇到了跨域问题，问题是这跨域问题不是一直都会出现，我什么都没改，启动项目竟然又没有跨域问题。
在这里插入图片描述

首先说明我的项目请求的地址时127.0.0.1:8080，然后出现了跨域问题。
接着我猛然看到在我的地址栏上地址是这样的：
在这里插入图片描述

我拎鸡一栋将之修改为以下形式，就没有问题了。
在这里插入图片描述

我真鸡贼。在这里插入图片描述

本地浏览器：测试跨域请求
知识改变命运，ヾ(◍°∇°◍)ﾉﾞ【求关注】
02-22 1083
本地浏览器在线模拟跨域请求
CORS跨域问题全解：原理、问题与解决方案
热门推荐
私聊前往站内信：https://i.youkuaiyun.com/#/msg/chat/weixin_44976692
08-19 2万+
在现代Web开发中，浏览器的同源策略（Same-Origin Policy）是一种重要的安全策略。它限制了从一个源（协议、域名和端口）加载的文档或脚本，与来自不同源的资源进行交互。这种限制防止了恶意网站在未经用户同意的情况下访问敏感数据。CORS是W3C标准之一，用于绕过同源策略的限制。在CORS机制下，服务器通过设置适当的HTTP头，告知浏览器允许哪些源访问其资源。CORS请求分为两类：简单请求（Simple Requests）和预检请求（Preflight Requests）。问题描述。
spring mvc使用cors解决跨域问题
qq_41622603的博客
10-29 500
什么是跨域问题： 一个页面发起的ajax请求，只能是与当前页域名相同的路径，如果域名不相同就会出现跨域问题。 在实际生产环境中，肯定会有很多台服务器之间交互，地址和端口都可能不同 比如我们当页的域名是：http://manage.leyou.com，现在要跳转到http://api.leyou.com，这样就会出现 在网关模块新建一个类，加入下面代码 import org.springframework.context.annotation.Bean; import org.springfram
【超详细实战】.NET Core 跨域配置（CORS）全攻略：从入门到生产环境避坑指南
最新发布
黑暗中摸索
04-24 1262
跨域资源共享（CORS，Cross-Origin Resource Sharing）
测试跨域
zlsdmx的博客
12-14 3982
目录： 1、什么是跨域 2、常见跨域场景 3、跨域处理办法 4、跨域自测方法 5、spring官网说法 https://howtodoinjava.com/spring5/webmvc/spring-mvc-cors-configuration/ 正文 1、什么是跨域 跨源资源共享 简称CORS CORS (Cross-origin resource sharing) allows a webpa...
解决File协议导致的CORS限制，用Node.js搭建本地服务器
Emily's Blog
06-21 1379
本地开发时，file://协议访问HTML文件常遇CORS限制。特别是使用``时，跨源请求受阻。无需担心！Node.js助你轻松搭建本地服务器，突破CORS限制。本文将指导你如何快速搭建，让本地HTML和JS代码测试畅通无阻。无需复杂配置，简单几步即可实现。跟随本文，让本地开发更加高效便捷，不再受CORS问题困扰。
测试是否可以跨域访问
dhdhdh0920的专栏
06-15 2069
使用浏览器开发者工具中的Console工具 比如谷歌浏览器，F12打开开发者工具，将以下代码粘贴到控制台，然后回车 var xhr = new XMLHttpRequest(); xhr.open('GET', 'http://192.168.1.100:8080/test/users'); xhr.send(null); xhr.onload = function(e) { var xhr = e.target; console.log(xhr.responseText); } .
什么是CORS跨域，如何解决CORS跨域的问题？
XiaoqiangClub的博客
09-11 300
什么是CORS跨域，如何解决CORS跨域的问题？
Node.js设置CORS跨域请求中多域名白名单的方法
10-20
在Node.js中设置CORS跨域请求的多域名白名单，可以按照以下知识点进行详细解读： 1. CORS基本概念：CORS是一种允许当前域（域名、协议和端口）之外的域从Web浏览器访问特定资源的机制。CORS的关键在于Web浏览器在...
22-09-25-06_uniAppVue3(uin-app本地主机数据跨域(Cors)数据交互实现之--前端)
09-25
因此需要首先对上一章中示例：22-09-24-04_uniAppVue3(初识HbuilderX之前移动前端App开发)进行重构，把网络后端数据实现跨域(Cores)交互实现重构为本地主机数据实现跨域(Cores)交互实现。 uin-app的vue视图页面中所...
【SpringBoot笔记20】SpringBoot跨域问题之CORS的四种解决方案
✅ Java 开发工程师，从事 Web 应用程序的研发，擅长 Spring、SpringBoot 等技术。 ✅ 热爱编程，业余时间学习新知识，通过 优快云 记录学习心得和笔记内容。
11-01 2353
跨域问题，是指：浏览器发起了一个不在当前域名下的其他资源，从而使得浏览器端发生报错的情况。// 端口不同// 协议不同// IP地址不同// 只有相同协议、域名、端口下的才能够访问跨域问题是发生在浏览器端的，浏览器能够正常访问到后端的接口，并且有返回，但是浏览器端，发现跨域了，于是就抛出来一个异常，从而导致浏览器无法解析接口返回的响应数据，跨域报错如下所示：上面案例是前端【】这个域，通过ajax访问【】域的时候，浏览器抛出的跨域异常信息。
前端本地调试解决跨域的两种方法
weixin_30929295的博客
12-22 929
1、谷歌浏览器非安全模式解决跨域 　　右击谷歌浏览器、在属性>>快捷方式>>目标里尾部加上 --disable-web-security --user-data-dir。前面要有空格 2、webpack前后端分离开发接口调试proxyTable解决方案 　　以vue-cli为例 　　 dev: { env: require('./dev.env'),...
本地开发中使用 chrome 启动参数解决ajax 中 cors 跨域问题
chaoge_dgqb的博客
11-12 1258
参考链接：https://stackoverflow.com/a/42024918 开发的时候总是遇到跨域访问错误，一个重要的原因是因为浏览器禁止跨域，没错就是浏览器禁止跨域 之所以浏览器禁止跨域，是出于安全考虑，避免某个用某个域名下的 cookie 去访问另一个域名的资源。 而浏览器判断是否跨域是根据请求头中的 host 来进行判断的，因此 ajax 无法修改 host 也无法添加，这是浏览器限制的。 而我们本地又需要跨域怎么办？可以通过设置 chrome.exe 的启动参数来实现。 首先，把 chr
解决开发环境的跨域问题
m0_55941180的博客
04-20 382
反向代理 当前端项目和后端接口不在同一个域名下，就会存在跨域问题。 vue-cli为我们在本地开启了一个服务器，可以通过这个服务器帮我们代理请求，当服务器向服务器发起请求就不存在跨域了，即帮我们解决了跨域问题。 采用vue-cli的代理配置： 在vue的配置文件vue.config.js中配置以下： module.exports = { devServer:{ proxy:{ //api表示如果请求地址中有/api的时候，就触发代理机制 '/api':{ target:‘w
CORS解决方案
Jartto's Blog
06-27 281
同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之的，浏览器只是针对同源策略的一种实现。主机名+协议+端口三者相同，被认为是同源。 一、问题重现 一般出现以上错误，基本可以认定，网站出现了同源策略问题，也就是出现了未经允许的跨域请求。那...
CORS的跨域访问
m0_73876302的博客
11-21 274
当一个资源请求一个其它域名的资源时会发起一个跨域HTTP请求。域名A的Web应用通过img标签引入了域名B的某图片资源，域名A的Web应用就会导致消览器发起一个药或HTP请求。浏览器一旦发现AlAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。cORS 是一个 W3C 标准，全称是“跨域资源共享”，它允许浏览器向跨源服务器发出xMLHttpRequest请求，从而克服了AlAX只能同源使用的限制。浏览器将CORS请求分成两类：简单请求和非简单请求。
用浏览器测试跨域
qq_41988504的博客
12-18 1805
1.随便打开一个网页打开浏览器开发者模式console 粘入 var token= "AD3BA267AD984966B3D2179C18FF44F0"; var xhr = new XMLHttpRequest(); xhr.open('GET', 'http://127.0.0.1:8080/test'); xhr.setRequestHeader("x-access-token",to...
原生Ajax的本地数据请求以及跨域请求和jsonp以及cors跨域
onlySeungRi的博客
06-13 1412
原生Ajax请求:ajax的出现,刚好解决了传统方法的缺陷。AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。五步使用法:1.创建XMLHTTPRequest对象2.使用open方法设置和服务器的交互信息3.设置发送的数据，开始和服务器端交互4.注册事件5.更新界面Ac...
Cors开发环境跨域配置
weixin_42530835的博客
11-29 195
@Configuration public class AlmWebMvcConfig implements WebMvcConfigurer { @Bean public LocaleResolver localeResolver() { return new AlmLocaleResolver(); } @Profile("dev") @Override public void addCorsMappings(CorsRegistry .
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值