vue +koa报错--koa-cors使用的坑 No Access-Control-Allow-Origin header is present ..解决方法

最新推荐文章于 2024-03-22 15:03:02 发布
原创 最新推荐文章于 2024-03-22 15:03:02 发布 · 2.2k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文详细解析了Vue项目中常见的跨域问题，特别是在向本地服务器发起注册请求时遇到的CORS策略阻止错误。通过调整中间件使用顺序，将cors()放置在所有其他中间件之前，有效解决了跨域访问限制，确保了前后端联调的顺利进行。

vue报错：

Access to XMLHttpRequest at 'http://localhost:3000/User/register' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

这是报错的代码：

 

切记：

app.use(cors())一定要在app.use()其他中间件的最前面！！！！！！！！！！

这是更改后的代码：

 

 

出现 has been blocked by CORS policy: No ‘Access-Control-Allow-Origin‘ header is present on the 解决方法
码农研究僧的博客
06-03 1万+
Access to XMLHttpRequest at 'http://127.0.0.1:5000/api/data' from origin 'http://10.197.0.79:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
基于vue3.0+vue-cli4.0+mysql+koa2的商城系统第一期
qq_42249811的博客
05-16 1067
基于vue3.0+vue-cli4.0+mysql+koa2的商城系统第一期 组件包含 组件名称 作用 axios ajax用作在不刷新页面的情况与服务器进行数据交互 vue-axios 将axios直接挂到vue实例中方便组件调用 vue-cookie 方便获取服务器种在前端的cookie值 vue-lazyload 实现图片懒加载提升用户体验 node-sass 辅助sass-loader是翻译sass必备依赖 sass-loader 解析sass文件翻译成浏览器能使
解决前后端跨域报错：has been blocked by CORS policy: No ‘Access-Control-Allow-Origin‘
热门推荐
wsaicyj的博客
11-11 2万+
来自一个IP端口的页面（前端项目），要访问另一个IP端口的资源（springboot请求接口），会产生跨域访问。
vue请求后端接口提示：CORS header miss ‘Access-Control-Allow-Origin’
qq_17328759的博客
03-22 2085
跨域问题处理
Vue报错笔记（2）：No 'Access-Control-Allow-Origin' header is present on the requested resource.
Blog
10-12 6668
就是说：当使用ajax访问远程服务器时，请求失败，浏览器报如上错误。这是出于安全的考虑，默认禁止跨域访问导致的1. 什么时跨域访问 举个栗子：在A网站中，我们希望使用Ajax来获得B网站中的特定内容。如果A网站与B网站不在同一个域中，那么就出现了跨域访问问题。你可以理解为两个域名之间不能跨过域名来发送请求或者请求数据，否则就是不安全的。跨域访问违反了同源策略，同源策略的详细信息可以点击如下链接：
Vue解决CORS header ‘Access-Control-Allow-Origin’ missing及同源、跨域问题
zyl19950717的博客
01-19 5359
当一个url请求中协议、域名、端口中只要有任意一个与当前url不相同，即为跨域（可以想象当小雷在A面馆吃上一碗A套餐才算是同源，但凡不是小雷、不在A面馆、没点A套餐，只要其中一个不相同，皆不是同源）。那么什么又是协议、域名、端口号呢？具体怎么判断，请看如下图。本地url请求url跨域or同源原因同源，直接访问协议、端口、域名都相同跨域http≠https，协议不通过跨域kuayu≠tongyuan，主域名不通过跨域www≠qq，子域名不通过跨域8080≠8001，端口号不通过。
vue 前端 has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
最新发布
12-26
在Vue前端开发中，“has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource” 错误是由于跨域资源共享（CORS）策略限制所导致的。以下是几种常见的解决...
Vue全家桶+Socket.io+Express-Koa2打造一个智能聊天室。.zip
09-09
Vue全家桶，作为一套构建用户界面的渐进式JavaScript框架，搭配Node.js的两个流行的Web应用框架Express和Koa2，以及实时通信库Socket.io，共同打造智能聊天室，提供了一个强大且灵活的解决方案。 Vue全家桶主要包括...
vue后端管理系统-基于koa2服务端实现的vue后台管理系统.zip
04-04
这个项目是基于 Vue.js 框架构建的前端部分，结合了 Koa2 框架来实现服务端的功能，提供了完整的前后端解决方案。下面将详细探讨 Vue 和 Koa2 在这个系统中的应用以及相关知识点。 Vue.js 是一个轻量级、高性能的...
Vue 3 + Koa2 + MySQL 开发和上线部署个人网站
Leo_DLi的博客
02-06 1835
记录个人的一个操作步骤, 顺序不分先后, 嫌啰嗦请出门右转!环境说明:服务器: 阿里云轻量应用服务器服务器系统: CentOS8.2本地环境: macOS 12.7.2Koa: 2.7.0pm2: 5.3.1。
【vue】利用koa-cors实现vue-cli项目的跨域请求后端
gz-郭小敏的博客
03-27 1956
错误提示： Access to XMLHttpRequest at 'http://localhost:7777/charts/query' from origin 'http://localhost:8081' has been blocked by CORS policy: Response to preflight request doesn't pass access control c...
Koa-cors throw后不带跨域cors头踩坑记录
japlus的博客
11-20 958
koa-cors跨域插件导致，若主动通过throw报错，则返回头中没有cors信息，导致fetch进入cors报错，表示请求被浏览器阻止
关于blocked by CORS policy的跨域问题
zhangjiashu的博客
05-02 1527
1、现象描述 Access to XMLHttpRequest at 'http://127.0.0.1:7001/api/user/list' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. 127.0.0.1:7001/api/user/list:1 Fail
koa开启cors允许跨域，携带cookies
Mar.三月
12-23 1767
使用koa开发想要开启 cors 非常koa开启cors允许跨域，携带cookies简单，已经有对应的库：@koa/cors。 虽然库的readme没有具体介绍具体的用法，但是我们可以通过阅读测试用例知道可以传什么参数，什么类型。 基本用法 const cors = require('@koa/cors') app.use(cors()); 只需要两行，接口就会在返回数据的时候带上Access-Control-Allow-Origin响应头。默认允许所有请求方式跨域，Access-Con.
koa2 跨域请求
weixin_30039205的博客
08-17 2548
问题 原因 解决办法 安装 koa2-cors 到对应目录 添加相关代码到app.js中 运行 问题 ionic2连接到 koa2的后台上，与后台交互一直提示404 原因 koa2跨域请求的原因 解决办法 安装 koa2-cors 到对应目录 命令行cd到对应的目录下，使用下面的命令安装 npm install koa2-cors 添加相关代码...
跨域详解 been blocked by CORS policy: No ‘Access-Control-Allow-Origin‘ header is present on the requeste
hekliu的博客
02-26 1万+
上面的意思就是 你访问一个什么地址被CORS 协议阻止， 没有 在Hearder 里面发现 Access-Control-Allow-Origin 的参数的 资源 跨域问题的原因：浏览器出于安全考虑，限制访问本站点以为的资源。 比如你有一个 网站 127.0.0.1:8080/ , 并且上面挂了一个页面 ，那么在这个页面中 ，你只访问 本站点的 资源不会受到限制，但是你如果访问其他站点，比如 127.0.0.1:8081 的资源就会受到限制。 备注：暂且把 协议，域名，端口...
ajax测试报错Access to XMLHttpRequest at '' from origin '' has been blocked by CORS policy: No 'Access-Co
icebns的博客
08-27 9623
报错全文：Access to XMLHttpRequest at 'http://localhost:8080/' from origin 'http://127.0.0.1:8848' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resou...
Access to XMLHttpRequest at ‘http://localhost/login/hello‘ from origin ‘http://127.0.0.1:5500‘ has b
m0_51346654的博客
06-03 2638
本文章仅用来记录课设所发生的错误，SpingBoot和js速成，因此遇到很多问题，仅具有参考性。 Access to XMLHttpRequest at ‘http://localhost/login/hello’ from origin ‘http://127.0.0.1:5500’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resourc...
解决跨域报错问题&Access to XMLHttpRequest at ‘xxx‘ from origin ‘xxx‘ has been blocked by CORs policy.header
qq_30068165的博客
04-08 4324
跨域问题：指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对javascript施加的安全限制。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值