记录一下关于前后端分离项目中关于跨域的问题:CORS 头缺少 ‘Access-Control-Allow-Origin‘

最新推荐文章于 2022-03-05 16:24:29 发布
最新推荐文章于 2022-03-05 16:24:29 发布
阅读量849 收藏
点赞数
分类专栏： npm 文章标签： 跨域问题 网络
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42400763/article/details/107608175
版权

在这里插入图片描述相信很多人在用前端模版的时候,或多或少会出现,我把前端运行起来了,为啥登录不上去呢?
其他的东西我也没改呀.这里就涉及到他给的一个服务器地址的问题了.
如果你在浏览器中按F12检查网络发现连接超时,那恭喜你,你看到了这条博客.在这里插入图片描述当我点登录的时候发现连接超时了,这时候我们就要改一个地址了.
在这里插入图片描述找到这个文件.找到里面的一行代码:
BASE_API: '"https://easy-mock.com/mock/5950a2419adc231f356a6636/vue-admin"'
由于这个服务器不稳经常性导致连接超时,所以我们应该换掉这个地址,直接改成本机即可:
BASE_API: '"http://localhost:8001"'
在这里插入图片描述当我们修改完之后,发现他不再提示连接超时了,而是提示network error,这时候是不是心凉了半截呢.不要慌,我们继续分析.这个时候就回到了我们的主题了.
关于跨域的问题:
通过一个地址去访问另一个地址,在这个过程中如果有三个地方任何一个不一样(访问协议:(http或者https),ip地址(192.168.1.1,172.11.11.11),端口号(9528,8001))
当前项目我用的是9528
在这里插入图片描述但是我下面地址改成了8001,所以说我们用9528端口去访问8001端口,引起了跨域问题.这也是前后端分离开发中经常遇到的问题.

在这里插入图片描述解决方式:
(1) 在后端controller接口上添加注解:
@CrossOrigin
在这里插入图片描述(2) 使用网关解决

风中有朵雨做的云yi
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue项目中的跨域源请求拦截问题CORS头缺少'Access-Control-Allow-Origin'
weixin_30905981的博客
03-21 6125
这里使用的是axios发请求出现的。 访问的api接口是： 在不同域之间访问是比较常见，在本地调试访问远程服务器。。。。这就是有域问题。 VUE解决通过proxyTable 解决办法： 1.检查请求方式：我一开始是用了this.axios.post(url)，改为this.axios.get(url) 2.将axios的 axios.defaults.b...
原因：CORS 头缺少 'Access-Control-Allow-Origin'
天生卷发
11-07 1万+
最近项目搭建了分支环境，本地项目为了配合开发总会在两个环境切换。 今天，启动突然浏览器报  原因：CORS 头缺少 'Access-Control-Allow-Origin'，拒绝访问。 后台报Connection to http://***.**.**(IP我隐藏一下，哈哈):7980 刚开始，网上搜索说是请求相应response里边要加Access-Control-Allow-Origi...
原因:CORS 头缺少 'Access-Control-Allow-Origin'
wuqifenghenshuai的博客
03-12 3654
解决办法如下：   1：在后台写的接口中加入以下代码：      this.servletResponse.setHeader("Access-Control-Allow-Origin", "*"); 不用太感谢我额!
vue.js跨域问题 : CORS 头缺少 'Access-Control-Allow-Origin
com_it的博客
07-08 1万+
已拦截跨源请求：同源策略禁止读取位于 http://localhost:8888/api/getnews 的远程资源。（原因：CORS 头缺少 'Access-Control-Allow-Origin'）。 1、主要是后端的问题，在springboot中加入下面代码即可 @Configuration public class MyWebMvcConfig implements WebM...
js， ajax或者vue，axios跨域被阻止 CORS 头缺少 'Access-Control-Allow-Origin'
热门推荐
雷绍发
05-19 11万+
今天ajax请求域名的时候出现 已阻止跨源请求：同源策略禁止读取位于 http://www.zuimeimami.com*****的远程资源。（原因：CORS 头缺少 'Access-Control-Allow-Origin'）。 解决办法1： var url='http://localhost:8080/WorkGroupManagment/open/getGroupById"
Allow CORS Access-Control-Allow-0.1.9.zip
最新发布
12-26
允许CORS：通过Access-Control-Allow-Origin，您可以轻松地在Web应用程序中执行跨域Ajax请求。 描述： 轻松将（Access-Control-Allow-Origin：*）规则添加到响应标头。 允许CORS：通过Access-Control-Allow-Origin...
TOMCAT 跨域 CORS Access-Control-Allow-Origin cors-filter
06-20
标题“TOMCAT 跨域 CORS Access-Control-Allow-Origin cors-filter”提及的是在Tomcat服务器上实现CORS策略的一种方式，主要涉及到`Access-Control-Allow-Origin`这个关键的响应头。 `Access-Control-Allow-Origin`...
Nginx配置跨域请求Access-Control-Allow-Origin * 详解
09-09
Nginx配置跨域请求Access-Control-Allow-Origin * 是解决现代Web应用中常见问题的一个关键步骤。在Web开发中，由于浏览器的同源策略限制，不同源的网站之间不能直接进行AJAX请求，除非服务器允许这样的跨域行为。...
已解决：No 'Access-Control-Allow-Origin'跨域问题
08-19
跨域问题在Web开发中是一个常见的挑战，尤其是在前后端分离的项目中。"No 'Access-Control-Allow-Origin'"错误是由于浏览器的同源策略（Same-origin Policy）限制所致，该策略规定，JavaScript发起的Ajax请求只能...
谷歌跨域插件Access-Control-Allow-Origin
02-15
标题中的“谷歌跨域插件Access-Control-Allow-Origin”指的是在谷歌浏览器上使用的扩展程序，用于解决Web开发过程中遇到的跨域问题。跨域是由于浏览器的同源策略（Same-origin policy）引起的，它限制了来自不同源的...
Access-Control-Allow-Origin
08-27
谷歌浏览器扩展程序一键解决本地开发跨域问题，让你不用乱mock数据，Access-Control-Allow-Origin工具包
允许CORS：访问控制_-_允许来源「Allow_CORS__Access-Control-Allow-Origin」_0_1_1_0_10_18_38.zip
09-26
允许CORS：访问控制_-_允许来源 前端跨域问题 本插件解压之后直接拖到谷歌浏览器扩展程序界面 即可使用
CORS 头缺少 'Access-Control-Allow-Origin'
星月昭铭的博客
05-16 1万+
今天使用vue发送Ajax请求时发现，请求不到数据，打开浏览器控制台发现报已拦截跨源请求：同源策略禁止读取位于 http://vue.studyit.io/api/get/lunbo 的远程资源。（原因：CORS 头缺少 ‘Access-Control-Allow-Origin’） 的错误 后面百度了一下CORS，CORS是一种允许当前域（domain）的资源（比如html/js/web ser...
CORS 头缺少 ‘Access-Control-Allow-Origin‘
pxyyoona的博客
03-05 9796
最近在调试一个用springboot和vue写的文件上传项目的时候总是出现CORS 头缺少 'Access-Control-Allow-Origin'这个问题，就是跨域资源无法访问的问题。 通过重新将项目还原到最初的模样，发现在vue的config里面的host改为了服务器的地址，将其改为localhost并在本地和服务器都验证过后发现项目又能正确使用了。 ...
【异常】前端vue后端Node.js报错“已拦截跨源请求：同源策略禁止读取位于 http:** 的远程资源。（原因：CORS 头缺少 ‘Access-Control-Allow-Origin‘）”
二木成林
10-31 4064
错误 在本次错误发生的项目中，前端使用vue写的，然后使用axios发送请求，后端使用的Node.js。 原因 发生跨域请求，需要解决跨域问题。 解决 具体可以参考这篇博客，针对的后端是Node.js的情况。 由于本人现阶段不会Node.js，所以给出的解决只是照猫画虎，能解决就用。 在index.js添加下面红框中的三行代码，就可以成功访问了。 运行的时候可能报“Error: Cannot find module 'cors'“，不能找到相关模块，使用npm install命令安装
BUG记录——跨域请求错误 CORS    头缺少  Access-Control-Allow-Origin
weixin_44105802的博客
06-08 1190
CROS 头缺少 'Access-Control-Allow-Origin'
【问题描述】跨域请求：CORS 头缺少 ‘Access-Control-Allow-Origin’
不食花生的猫：http://110.40.191.51/
10-20 1070
Ajax 同源 与 异域问题 问题场景： 在编写好了前后端程序之后，连接服务器的过程中出了错，浏览器显示如下： 已拦截跨源请求：同源策略禁止读取位于 http://localhost:9955/dbUserController/login?username=zhangsan&pwd=lisi 的远程资源。（原因：CORS 头缺少 ‘Access-Control-Allow-Origin’）。 原后端代码如下： @RequestMapping(value="/login" , method =
解决：403错误 和 已拦截跨源请求：同源策略禁止读取位于localhost:8080/xxx/xx的远程资源。（原因：CORS 头缺少 ‘Access-Control-Allow-Origin‘）。
Jav
10-09 3011
问题描述：在使用vue框架进行前后端分离开发时，同时使用springboot框架，ajax发送请求时出现上述问题 解决思考： 分析：我们先打开浏览器的开发者工具 控制台输出错误信息，上网查阅（原因：CORS 头缺少 ‘Access-Control-Allow-Origin’）可以知道是大概率是跨域问题 再查看网络部分（先打开开发者模式，在点击按钮或者其他提交表单的操作）看到一个403状态码的失败网络请求，查看详细url路径等信息 一般403的错误有两类原因： 跨域问题 我们可以..
原因:CORS 头缺少 ‘Access-Control-Allow-Origin’
08-14
这个错误通常是由于浏览器的跨域资源共享 (CORS) 机制引起的。当浏览器发起一个跨域请求时，服务器需要在响应头中包含一个名为 'Access-Control-Allow-Origin' 的字段，以指示允许访问该资源的源。如果服务器没有正确设置这个字段或设置错误，浏览器会拒绝访问该资源，并报错 "CORS 头缺少 'Access-Control-Allow-Origin'"。 要解决这个问题，服务器需要在响应头中设置正确的 'Access-Control-Allow-Origin' 值。如果你有控制服务器代码的权限，你可以在响应头中添加以下代码来允许所有来源访问该资源： ``` Access-Control-Allow-Origin: * ``` 这将允许任何来源跨域访问该资源。如果你只想允许特定的域名进行跨域访问，你可以将 * 替换为相应的域名。例如： ``` Access-Control-Allow-Origin: https://example.com ``` 这将只允许来自 https://example.com 的请求进行跨域访问。 请注意，修改服务器配置可能需要管理员权限或者与你的服务器提供商联系。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值