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.1k 收藏 1
点赞数 3
CC 4.0 BY-SA版权
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/xxxxxxxxYZ/article/details/99304796
本文详细解析了Vue项目中常见的跨域问题，特别是在向本地服务器发起注册请求时遇到的CORS策略阻止错误。通过调整中间件使用顺序，将cors()放置在所有其他中间件之前，有效解决了跨域访问限制，确保了前后端联调的顺利进行。

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

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.
vue项目跨域问题No ‘Access-Control-Allow-Origin‘ header is present on the requested resource.
m0_48390697的博客
09-08 745
vue项目跨域问题No 'Access-Control-Allow-Origin' header is present on the requested resource.
解决前后端跨域报错：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 2003
跨域问题处理
Vue报错笔记（2）：No 'Access-Control-Allow-Origin' header is present on the requested resource.
Blog
10-12 6652
就是说：当使用ajax访问远程服务器时，请求失败，浏览器报如上错误。这是出于安全的考虑，默认禁止跨域访问导致的1. 什么时跨域访问 举个栗子：在A网站中，我们希望使用Ajax来获得B网站中的特定内容。如果A网站与B网站不在同一个域中，那么就出现了跨域访问问题。你可以理解为两个域名之间不能跨过域名来发送请求或者请求数据，否则就是不安全的。跨域访问违反了同源策略，同源策略的详细信息可以点击如下链接：
vue后端管理系统-基于koa2服务端实现的vue后台管理系统.zip
最新发布
04-04
这个项目是基于 Vue.js 框架构建的前端部分，结合了 Koa2 框架来实现服务端的功能，提供了完整的前后端解决方案。下面将详细探讨 Vue 和 Koa2 在这个系统中的应用以及相关知识点。 Vue.js 是一个轻量级、高性能的...
vue2后台管理系统（ vue2 + vue-router + Vuex + axios + elementui + echarts，nodejs后台）
切图仔
06-18 5724
vue2 + vue-router + Vuex + axios + elementui + echarts后台管理系统，包括国际化配置，富文本编译器，mockjs，上传图片，pdf打印，导出Excel表，购物车案例
Vue 3 + Koa2 + MySQL 开发和上线部署个人网站
Leo_DLi的博客
02-06 1747
记录个人的一个操作步骤, 顺序不分先后, 嫌啰嗦请出门右转!环境说明:服务器: 阿里云轻量应用服务器服务器系统: CentOS8.2本地环境: macOS 12.7.2Koa: 2.7.0pm2: 5.3.1。
基于vue3.0+vue-cli4.0+mysql+koa2的商城系统第一期
qq_42249811的博客
05-16 1049
基于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文件翻译成浏览器能使
Koa-Vue-Fullstack样板：快速构建轻量级全栈Web应用
- **Koa Cors**：提供跨源资源共享（CORS）的支持。 - **Koa Bodyparser**：用于解析请求体。 - **Mongoose**：是MongoDB的对象模型工具，用于在Node.js环境中与MongoDB进行交互。 - **环境**：提及了服务器端Node....
Vue解决CORS header ‘Access-Control-Allow-Origin’ missing及同源、跨域问题
zyl19950717的博客
01-19 5055
当一个url请求中协议、域名、端口中只要有任意一个与当前url不相同，即为跨域（可以想象当小雷在A面馆吃上一碗A套餐才算是同源，但凡不是小雷、不在A面馆、没点A套餐，只要其中一个不相同，皆不是同源）。那么什么又是协议、域名、端口号呢？具体怎么判断，请看如下图。本地url请求url跨域or同源原因同源，直接访问协议、端口、域名都相同跨域http≠https，协议不通过跨域kuayu≠tongyuan，主域名不通过跨域www≠qq，子域名不通过跨域8080≠8001，端口号不通过。
【vue】利用koa-cors实现vue-cli项目的跨域请求后端
gz-郭小敏的博客
03-27 1939
错误提示： 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 930
koa-cors跨域插件导致，若主动通过throw报错，则返回头中没有cors信息，导致fetch进入cors报错，表示请求被浏览器阻止
关于blocked by CORS policy的跨域问题
zhangjiashu的博客
05-02 1502
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
跨域请求被拦截问题——has been blocked by CORS policy: No ‘Access-Control-Allow-Origin‘ header is present on...
weixin_43660476的博客
03-20 3万+
在开发前后端分离的项目时，必须解决的一个问题就是跨域请求问题。 1 什么是跨域请求 跨域请求就是指：当前发起请求的域与该请求指向的资源所在的域不同时的请求。即“协议 + 域名 + 端口号” 有不相同，那么就是跨域。 例如，如下在开发中遇到的跨域请求被拦截问题。 前端的端口是8080，而后端的端口是8000，前端请求后端的时后端会检查request的origin，发现是8080，跟自己的8000不一致，就会有跨域拦截。 跨域请求问题可以在前端解决，也可以在后端解决。 1）前端的解决方法——使用正向代理，隐藏
No 'Access-Control-Allow-Origin' header is present on the requested resource'， 跨域访问的解决方法
热门推荐
木子叶的奔跑
11-13 33万+
当请求不在同一域名下的资源文件（ip地址+端口号）时，会报如下错误： “No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:8080’ is therefore not allowed access.”，翻译下，因为被请求的资源没有设置 ‘A...
解决前后端跨域问题No‘Access-Control-Allow-Origin‘...
筱白爱学习！的博客
06-22 7663
解决前后端跨域问题No'Access-Control-Allow-Origin'
nodejs express 允许跨域访问(Access-Control-Allow-Origin)
dreamer2020的专栏
06-09 4万+
前世今生 在WEB应用普及的今天，个人信息（账号、COOKIE等）广泛应用于网页。浏览器同源策略保证了WEB环境的安全性。同源策略是说，在a.com域名下通过ajax或者XmlHttpRequest等方式访问b.com的资源时，是不被允许的。 然而在很多时候，出于业务的的需要，我们经常有类似的跨域访问 的需求。浏览器有一些支持跨域访问的标签，例如script,img等。 有这样的需求，自然就
nodejs后端解决跨域 "Access-Control-Allow-Origin" 问题
舜岳的博客
02-26 1715
我们先看一下报错： npm安装@koa/cors@2解决跨域 GitHub地址：https://github.com/koajs/cors 第1步：安装： npm install @koa/cors@2 --save 第2步：app.js内配置： const Koa = require('koa'); const cors = require('@koa/cors'); const app...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值