【vue】利用koa-cors实现vue-cli项目的跨域请求后端

最新推荐文章于 2024-08-27 09:53:40 发布
最新推荐文章于 2024-08-27 09:53:40 发布
阅读量1.8k 收藏 1
点赞数 1
分类专栏： vue javascript 报错
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/github_39570717/article/details/88852250
版权
本文介绍了在Vue CLI项目中遇到跨域问题的解决方案，通过在Node.js后端使用koa-cors来配置允许的源。错误提示显示'Access-Control-Allow-Origin'头包含多个值，但只允许一个。解决方法包括安装koa-cors并在app.js中正确配置。
摘要由CSDN通过智能技术生成

错误提示：

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 check: The 'Access-Control-Allow-Origin' header contains multiple values 'http://localhost:8080,http://localhost:8081', but only one is allowed.

 

原因：

跨域。vue-cli搭建的前端项目访问地址为http://localhost:8081，而当前请求接口是地址为http://localhost:7777

 

我用vue-cli搭建前端工程，后端语言则直接采用node，并调用了koa框架搭建后端

前端代码（xxx.vue）：

$.ajax({
	url:'http://localhost:7777/charts/query',
	type: 'POST',
	contentType: 'application/json',
	da
最低0.47元/天 解锁文章
gz-郭小敏
关注
专栏目录
解决跨域问题（vite、axios/koa）
like_a_diamond的博客
07-01 452
1.vite.config.ts文件配置proxy代理。3.在main.ts文件中引入axios。2.axios配置文件。
koa如何解决跨域
前端菜鸡的博客
07-02 1078
主要通过koa-cors插件来处理，共3个步骤： ①安装： npm install koa-cors --save ②引入： const cors = require('koa-cors'); // 解决跨域 ③注册： app.use(cors()); ps：需要注意的是，要把 app.use(cors()); 放在路由的前面，坑已踩 ...
Koa-CORS：灵活的CORS中间件解决方案
gitblog_01103的博客
08-23 326
Koa-CORS：灵活的CORS中间件解决方案 koa-corsCORS middleware for Koa项目地址:https://gitcode.com/gh_mirrors/ko/koa-cors 项目介绍 Koa-CORS 是一个专为基于 Koa 的 Node.js 应用设计的 CORS（跨源资源共享）中间件。它提供了高度可配置的选项，使开发者能够轻松地处理跨域请求，确保前后端分离架构...
推荐开源项目：Koa-CORS——简化Koa框架下的CORS处理
最新发布
gitblog_00263的博客
08-27 182
推荐开源项目：Koa-CORS——简化Koa框架下的CORS处理 koa-corsCORS middleware for Koa项目地址:https://gitcode.com/gh_mirrors/ko/koa-cors 在开发跨域Web应用时，CORS（Cross-Origin Resource Sharing，跨源资源共享）成为了无法回避的关键技术。对于使用Koa作为Node.js后端框架...
推荐开源项目：Koa-CORS - 简易跨域解决方案
gitblog_00046的博客
05-27 395
推荐开源项目：Koa-CORS - 简易跨域解决方案 koa-corsCORS middleware for Koa项目地址:https://gitcode.com/gh_mirrors/ko/koa-cors 项目介绍 在Web开发中，跨域问题常常困扰着开发者。Koa-CORS是针对基于Node.js的Koa框架的一款中间件，旨在帮助开发者轻松解决这个问题。灵感来源于知名的node-cors库...
前端 跨域插件 koa2-cors
xiaosi1413的博客
04-25 665
npm install --save koa2-cors 1 var cors = require('koa2-cors'); //允许跨域 app.use(cors());
vue后端管理系统-基于koa2服务端实现的vue后台管理系统.zip
04-04
10. **部署与优化**：利用 Vue CLI 或 Webpack 配置实现项目的打包和部署，考虑 SEO 优化和性能提升。 在 Koa2 服务端，可能会涉及以下技术点： 1. **路由设置**：使用 Koa2 的 Router 中间件定义 API 路由，处理 ...
客户端（vue框架）与服务器（koa框架）通信及服务器跨域配置详解
08-29
总结，Vue与Koa之间的通信主要通过HTTP请求实现，跨域问题可以通过在服务器端设置适当的响应头解决，比如使用`koa-cors`中间件。理解这些基本概念有助于开发者更好地构建和调试前后端分离的应用。
基于Vue + Koa设计实现H5页面可视化编辑器【100011847】
04-12
在本项目中，我们主要探讨的是如何利用Vue.js和Koa.js这两个强大的JavaScript框架来构建一个H5页面的可视化编辑器。Vue.js是一款轻量级的前端MVVM（Model-View-ViewModel）框架，它提供了组件化开发模式，使得开发者...
【vue+koa2搭建mock数据环境的详细教程】
zsxy2019的博客
11-30 993
前段时间写了一篇前端vue项目实现mock数据方式的文章，主要是在vue项目里使用mock数据，数据和项目耦合在一起，不太优雅，作为一个有追求的前端，怎么能容忍这种方法呢？特以此篇，记录利用koa2搭建服务端，提供mock数据的方法。 初始化vue项目 这里以vue项目为主，当然别的类型项目依然可以使用这种mock数据的方式。 vue create vue-koa2-demo 前提是安装了vue-cli的脚手架，我电脑安装的是vue-cli3的版本。按照要求一步一步选择后，记得选择安装vuex，后续要使用
koa2-cors
孩子不懒的博客
02-21 267
源代码 // Type definitions for koa2-cors 2.0 // Project: https://github.com/zadzbw/koa2-cors#readme // Definitions by: xialeistudio <https://github.com/xialeistudio> // Definitions: https://github....
vue +koa报错--koa-cors使用的坑 No Access-Control-Allow-Origin header is present ..解决方法
二月的博客
08-12 2085
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...
vue 跨域配置_（五）vue和koa跨域通信配置
weixin_39522103的博客
12-12 285
安装koa-bodyparser中间件到我们项目中npm install --save koa-bodyparser npm install --save koa-cors在app.js中引用const bodyParser = require('koa-bodyparser') // 用于接收post请求的 app.use(bodyParser()) const cors = require...
在koa2，koa 中使用cors 模块来实现跨域
业余前端的职业经历
10-27 864
其实碰见跨域问题还是挺头疼的呢 解决就好了 程序员就是在踩坑中成长的 // 安装 npm i koa2-cors 引用使用 const cors = require('koa2-cors'); app.use(cors({ origin: "*", // 允许 所有的都可以跨域 exposeHeaders: ['WWW-Authenticate', 'Server-Authorization'], maxAge: 50000, credentials: true, allowMe
Vue跨域问题的解决方法（前后端&express、koa）
balloonhunter的博客
06-06 503
在刚接触Vue时，经常会遇到跨域的问题，本文提供两种解决方法。 问题背景 跨域是什么： 跨域资源共享(CORS) 是一种机制，它使用额外的HTTP头来告诉浏览器 让运行在一个 origin (domain) 上的Web应用被准许访问来自不同源服务器上的指定的资源。当一个资源从与该资源本身所在的服务器不同的域、协议或端口请求一个资源时，资源会发起一个跨域 HTTP 请求。 出于安全原因，浏览器限制从脚本内发起的跨源HTTP请求。 例如，XMLHttpRequest和Fetch API遵循同源策略。 这意味着使
Koa 中通过 Koa2-cors 配置服务器端允许跨域以及 Cookie 允许跨域
越陌度阡
11-21 2000
在开发中，有时会遇到这种问题：通过浏览器去访问一个接口可以正常获取到信息，但是通过点击事件去请求这个接口却无法正常获取到想要的信息。此时，你可能就是遇到跨域问题了， 在Koa中的解决方案如下： 1. 安装插件 npm i koa2-cors --save 2. 引入及使用插件 const Koa = require('koa'); const app = new Koa(); // 引入插件 const cors = require('koa2-cors'); // 配置插件 a...
koa简单实践之 koa-route
m_review的博客
11-01 821
koa的同源策略 const cors = require('koa-cors'); // 使用cors中间件 app.use(cors()); koa的get,post接口 使用 koa-route 中间件。创建get，post请求 const route = require('koa-route'); const myGet = async ctx =&gt; { ctx.body =...
使用koa2为vue项目搭建优雅的mock数据服务器
首先通过vue-cli初始化一个Vue项目，然后创建并配置Koa2服务端，提供Mock数据接口。" 在前端开发过程中，Mock数据是一种常用的技术，它可以帮助开发者在没有后端支持或者接口未完成时进行前端功能的测试和开发。本...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值