koa2 使用 koa2-cors 库配置跨域无效的问题

最新推荐文章于 2024-04-07 12:00:37 发布
最新推荐文章于 2024-04-07 12:00:37 发布
阅读量3.7k 收藏 1
点赞数
文章标签： 接口 ajax node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zahirah11/article/details/106191034
版权
本文介绍了在Koa2中使用koa2-cors库配置跨域后仍然遇到问题的原因和解决方案。问题源于fetch请求时设置了credentials字段。去除该字段配置后，跨域问题得到解决。此外，扩展部分提到axios请求库因其使用xhr方式，不受此问题影响，能正常获取数据。
摘要由CSDN通过智能技术生成

参考：MDN fetch

服务端配置

const cors = require("koa2-cors");

app.use(cors())

服务端这样配置后，前端页面访问接口还是报跨域的问题。

原因

由于我使用的是 fetch 去请求接口，且配置了 credentials 字段，代码如下：

最低0.47元/天 解锁文章
墨痕丶
关注
浅谈Koa2框架利用CORS完成跨域ajax请求
01-20
实现跨域ajax请求的方式有很多，其中一个是利用CORS，而这个方法关键是在服务器端进行配置。 本文仅对能够完成正常跨域ajax响应的，最基本的配置进行说明（深层次的配置我也不会）。 CORS将请求分为简单请求和非简单...
[koa2] 之 [koa2-cors] 解决跨域问题
Alice
01-03 5770
用koa2写了一个数据服务器，但是调试这个接口的时候，发现需要跨域，于是引入了koa-cors插件，但是还是不定时出现 更换插件版本，解决了该问题，之前的版本卸载掉。 npm install --save koa2-cors var cors = require('koa2-cors'); //允许跨域 app.use(cors()); ...
Node框架KOA2学习过程中遇见的跨域设置Cookie失效问题原因以及解决方案
qq_27824793的博客
08-28 1031
踏破铁鞋无觅处，得来全不费工夫。我们在遇见问题的时候，应该尽量从问题的本质出发寻找突破口，试着从另一个角度切入。其次就是对相关知识的掌握程度，我在这次的遇见问题和解决问题的过程中做出了反思，确实有寻找到突破口：浏览器的同源策略限制。但是对其相关的策略掌握不够深入，导致花费了比正常多几倍的时间去解决问题，经过这次的文档查阅，我对跨域设置cookie以及浏览器同源限制策略，有了更进一步的认知。最后我想说的是：不积跬步无以至千里。......
跨域问题详解：CORS问题+解决办法
weixin_45565886的博客
09-29 1万+
跨域问题详解：CORS问题+解决办法
服务器使用了cors解决跨域，但在火狐中还是出现了跨域问题
m0_62395042的博客
03-30 2293
在开发环境中查看端口号的设置，在Firefox浏览器中，通常会禁止使用一些端口号，例如3000、5000、8000等端口。因此，Firefox浏览器默认情况下可能不允许访问这些端口号上的资源。因此，如果你在使用Firefox浏览器时遇到了端口号3000无法访问的问题，可以尝试使用其他端口号，如8080、8888等。而在Chrome浏览器中，通常不会对端口号进行限制，因此使用任何端口号都是可以的。Firefox浏览器对跨域请求的限制较严格，需要在服务器端明确设置响应头。
Koa2使用CORS完成跨域及解决OPTIONS请求
热门推荐
lihefei_coder的博客
07-09 1万+
方法1：设置CORS允许跨域 const Koa = require('koa'); const bodyParser = require('koa-bodyparser'); //post数据处理 const router = require('koa-router')(); //路由模块 const app = new Koa(); app.use(async (ctx, next) =&g...
cors:koa 的跨域资源共享（CORS）
07-24
@koa/cors koa 的安装$ npm install @koa/cors --save快速开始使用默认选项启用 cors： origin: 请求源头允许方法：GET、HEAD、PUT、POST、DELETE、PATCH const Koa = require ( 'koa' ) ;const cors = require ( '@...
koa2-easy：使用koa2的简便方法
02-03
编写自定义路由与Restful Api，至少支持CORS跨域读取post数据纯ES6 / 7编写，使用koa2的Async / Await，避免放置地狱默认支持gzip，减少传输体积，加快传输速度支持文件上传开箱即用，无需折腾支持TypeScript模板...
客户端（vue框架）与服务器（koa框架）通信及服务器跨域配置详解
08-29
通过引入`koa-cors`，并在中间件中使用`app.use(cors())`，服务器会自动为每个响应添加合适的跨域允许头部，从而解决这个问题。 `Access-Control-Allow-Methods`字段指明了服务器允许客户端使用哪些HTTP方法进行...
解决koa跨域问题
qq_41687299的博客
04-17 361
安装：koa2-cors cnpm i koa2-cors --save 在文件中引用 配置中间件
Koa 中通过 Koa2-cors 配置服务器端允许跨域以及 Cookie 允许跨域
越陌度阡
11-21 2002
在开发中，有时会遇到这种问题：通过浏览器去访问一个接口可以正常获取到信息，但是通过点击事件去请求这个接口却无法正常获取到想要的信息。此时，你可能就是遇到跨域问题了， 在Koa中的解决方案如下： 1. 安装插件 npm i koa2-cors --save 2. 引入及使用插件 const Koa = require('koa'); const app = new Koa(); // 引入插件 const cors = require('koa2-cors'); // 配置插件 a...
koa的跨域处理koa2-cors
牛先森家的博客
06-04 2651
koa的跨域处理koa处理跨域1、安装koa2-cors2、main.js中配置 koa处理跨域 跨域问题如图： 1、安装koa2-cors npm i koa2-cors npm包地址：koa2-cors 2、main.js中配置 // 处理跨域 const cors = require('koa2-cors');// 配置中间件 // 实例化koa 之后的代码如下： app.use(cors({ origin: function(ctx){ return 'http://local
CORS 请求未能成功_当遇到跨域开发时, 我们如何处理好前后端配置和请求库封装(koa/axios版)...
weixin_39976166的博客
11-21 307
我们知道很多大型项目都或多或少的采用跨域的模式开发, 以达到服务和资源的解耦和高效利用. 在大前端盛行的今天更为如此, 前端工程师可以通过nodejs或者Nginx轻松搭建起web服务器.这个时候我们只需要请求后端服务器的接口即可实现系统的业务功能开发.这个过程中会涉及到web页面向API服务器的跨域访问(由于受到浏览器的同源策略,但是业界已有很多解决方案,接下来会介绍).通过这种开发模式使得我们...
关于使用koa 跨域问题你可能会遇到
weixin_44519496的博客
08-23 128
var cors = require(‘koa2-cors’); // 跨域 const allowOrigins = [ “http://localhost:8080” // 需要跨域的端口，与本服务器端口不一样，请注意。 ]; app.use(cors({ origin: function(ctx) { if (allowOrigins.includes(ctx.header.origin)) { return ctx.header.origin; } return false; }, exposeHe
后端说处理了跨域但没有生效
最新发布
qq_59626859的博客
04-07 710
with-credentials用来设置是否发送cookie，如果为true就会在跨域请求时候携带cookie，如果是同一个域名则设置什么都无妨，但是如果不是同一个域名下/外部接口，携带了cookie的话，后端就不能将Access-Control-Allow-Origin设置为*。因为设置为*时cookie不会出现在http的请求头里。常见的跨域报错，一般都是由后端进行setHeader/*什么的。但是现在这种情况就是后端说他们做了处理。但是我这边请求还是报错。
koa解决跨域的方法
weixin_44251396的博客
01-10 524
1.自行添加一个中间件 app.use(async (ctx, next)=> { ctx.set('Access-Control-Allow-Origin', '*'); ctx.set('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-...
关于koa2处理cors请求的坑-async/await
weixin_36094484的博客
11-01 1927
同时开了react后台项目在3000端口，前端vue在8080端口，koa2在9000端口。 处理非json的cors请求时没问题，如一般的GET、formdata。 然后处理一个json内容的post请求发现浏览器报错，说：response没有返回Access-Control-Allow-Origin。 但是我在 router.post("/uploadNews", fileContr...
koa2-cors配置
05-31
你可以在使用koa2-cors时传递一个对象来配置选项。例如： ```javascript const Koa = require('koa'); const cors = require('koa2-cors'); const app = new Koa(); app.use(cors({ origin: '...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值