前后端跨域请求处理以及携带cookie CORS实现（koa2）

最新推荐文章于 2024-07-03 16:30:47 发布
最新推荐文章于 2024-07-03 16:30:47 发布
阅读量7.6k 收藏 8
点赞数 2
分类专栏： FE node
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33358824/article/details/80694865
版权
本文介绍了在前后端分离的项目中，如何通过CORS处理跨域请求并携带cookie。重点讲解了前端设置xhr.withCredentials、后端配置Access-Control-Allow-*响应头的方法，以及在开发环境中解决跨域问题的实践，包括前端React项目与Node.js Koa2后端的配合。
摘要由CSDN通过智能技术生成

首先，一个较大的web项目一般是由前端跟后台两方开发。为了解耦，一般是前端开发页面，后端开发接口然后部署到服务器上。前端使用Ajax访问服务端接口。这时候一般需要一个Restful API 来规定接口格式（接口文档）。而且因为Http协议是无状态的，如果遇到标识用户身份（比如登陆）的需要，需要cookie session来验证。

面对这种跨域需求。我们可以通过cors来实现。具体理论 http://www.ruanyifeng.com/blog/2016/04/cors.html 阮一峰老师这篇博客写的很好。

1. 前端需要xhr.withCredentials = true 来标识传输cookie

2.服务端。

    我在本地前端后端同时开发。（因为前端是react，用node.js处理静态资源，需要额外构建。不能支持热更新，所以开发过程中前端后台都使用热更新，缺点是需要跨域。）前端webpack-dev-server http://127.0.0.1:8080 后端node.js http://127.0.0.1:3000

根据同源策略(协议、域名、端口相同)，所以直接请求会报错。

    服务端配置 Access-Control-Allow-Origin: '*' 或者前端的origin 这样接口能访问。但是不能获得cookie。还需要设置

Access-Control-Allow-Credentials：tru

最低0.47元/天 解锁文章
zhouhaoxiangcn
关注
专栏目录
利用XSS来将cookie传送指定文件中
Q1n6
09-23 848
题目可以说是很直白了，为什么突然写这个，还来源于前几天的面试，今年的校招因为一些公司的缩招，可以说是泥潭之争了，当然了，被面试官蹂躏也是自身水平和能力的限制，没有任何怨言。在面试官让我手写xss利用代码的时候，我才发现，因为一直以来的乙方的惯性思维，在漏洞利用和脚本上自己的实践太少了，但是还好，我还有很长很长的时间，可以努力。 在存在XSS漏洞的输入框中输入（IP地址为测试内网地址）： d
允许跨域资源共享（CORS）携带 Cookie （转载）
11-06 697
如何让CORS携带Cookie CORS 是一个 W3C 标准，全称是“跨域资源共享”（Cross-origin resource sharing）。默认浏览器为了安全，遵循“同源策略”，不允许 Ajax 跨域访问资源，而为了允许这种操作，服务器端和客户端都要遵循一些约定。服务器端需设置以下响应头： Access-Control-Allow-Origin: <or...
解决前端登录成功之后，往后端发请求携带cookie问题
最新发布
m0_73966521的博客
07-03 1221
总结一下就是：我一直把我的cookie种在了http://localhost:8080/api这个域，不过http://localhost:8080/api和 http://127.0.0.1:5173/并不是一个域，所以，我在访问 http://127.0.0.1:5173/这个域名的时候，我就一直找不到cookie。说回这个Cookie在项目中的作用，当我们成功登录之后，浏览器产生了这个Cookie，如果我们想访问其它页面的话，就需要携带这个Cookie，要不然后端是不认识你的。
koa解决跨域的方法
weixin_44251396的博客
01-10 523
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-...
koa教程--koa2使用cookie
weixin_34253126的博客
06-27 281
koa2使用cookie使用方法koa提供了从上下文直接读取、写入cookie的方法ctx.cookies.get(name, [options]) 读取上下文请求中的cookiectx.cookies.set(name, value, [options]) 在上下文中写入cookiekoa2 中操作的cookies是使用了npm的cookies模块，源码在github.com/pillarjs/...
CORS 跨域
Aliguagua的博客
06-10 1154
CORS 跨域 对于跨域问题，我之前只知道jsonp的解决方案，这周改版了一个很复杂的H5页面，让我接触到了另一种解决跨域的方案——CORS。刚开始还是一脸蒙蔽的，然后马上联想到了之前使用koa2的时候用过koa2-cors这个模块，当时也是解决跨域问题的，这两个应该是一样的吧。查阅资料后发现是不一样的东西。 看了阮一峰老师的跨域资源共享 CORS 详解 这片文章后，对CORS有了新的认识，原...
浅谈Koa2框架利用CORS完成跨域ajax请求
01-20
实现跨域ajax请求的方式有很多，其中一个是利用CORS，而这个方法关键是在服务器端进行配置。 本文仅对能够完成正常跨域ajax响应的，最基本的配置进行说明（深层次的配置我也不会）。 CORS将请求分为简单请求和非简单...
axios携带cookie配置详解(axios+koa)
10-17
总结而言，文章详尽地探讨了在axios发起请求时携带cookie的问题，涵盖了客户端的配置、服务端的配置以及对CORS预检请求的处理。这些知识点对于开发跨域交互的Web应用尤为重要，需要开发者仔细掌握和实施，以确保在...
前后端交互 -- ajax跨域之CORS
CSDN_GMC的博客
04-15 736
解决跨域--CORS一. CORS跨域设置1. 允许跨域 Access-Control-Allow-Origin2. 允许客户端获取的头部信息 Access-Control-Expose-Headers3. 允许前端设置的头部 Access-Control-Allow-Headers4. 设置前端允许发送的请求方式 Access-Control-Allow-Methods5. 允许携带凭证 Acc...
Koa学习笔记: Koa2解决跨域问题
qq_24724109的博客
12-11 1133
1. 使用jsonp解决跨域问题 jsop核心：后端将数据以函数参数的形式进行返回，利用script跨域的方式来解决跨域问题; 设置方法: 获取想返回的响应体数据 利用javascript callback(param)返回一个jsonp的函数体 设置type为text/javascript 设置返回的响应体 // index.js const Koa = require('koa');...
CORS跨域以及Cookie跨域
xxxmen008的博客
08-06 180
@CORS跨域以及Cookie跨域 CORS跨域以及Cookie跨域 一、CORS跨域 首先跨域可以理解为指的并不是同一个项目！！！ 举例： 本地同时部署两个web项目：web1,web2 域名分别是http://localhost:8081和http://localhost:8082 web1中向web2发起请求即为跨域！ 此时浏览器会询问web2是否接受web1的请求（这里是一个options请求预检）。 如果web2中配置了允许web1的请求则可以正常响应，否则拒绝响应。 二、cookie跨域 前
Cookie跨域与CORS协议
开源世界
04-28 281
什么是跨域？ 所谓跨域，意思就是跨过了浏览器的同源策略。 同源指的是三个相同： 协议相同 域名相同 端口相同 违反同源策略会有以下限制： Cookie、LocalStorage、IndexDB无法获取 DOM无法获得 AJAX请求不能发送 CORS解决跨域 什么是CORS？ 2014年W3C发布了 CORS Recommendation 使资源共享变得更方便，默认情况下，浏览器对跨域请求不会携带Cookie,但鉴于Cookie在身份验证等方面的重要性，CORS推荐使用额外的响应头字段来允许跨域发送Cooki
跨域，cookie 问题汇总
leexiehui的博客
03-07 752
1. Filter中 对请求进行处理 @Override public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException { HttpServletRequest req = (Http...
React，koa2前后端分离项目涉及cookie传递的方法
01-21 2949
       随着前端技术的日新月异，公司项目大部分都采用了前后端分离的技术栈来实现，即前端部署在一个自己的服务端上，网站后台也部署在另一个端口。我目前的工作是完成登录态的维持，即采用session维持，这就需要传递cookie来完成。         在这样的前提下，跨域成为了一个小的难点，解决办法有很多，jsonp，cors，proxy等等，前两种都离不开服务器的设置，我们这里只说我用到的，...
XSS和跨域请求
qq_48829044的博客
06-19 1102
XSS与同源策略
一个跨域请求的XSS续
mengxiankon的博客
05-09 638
之前讨论过，在解决post跨域请求时，采用iframe+本域代理页的形式，兼容性（当然是包括IE6啦）是最好的。上次提到，代理页面的作用是：执行本域下的回调函数。就是这个原因，给XSS带来了便利。详细说明，请参考一个跨域请求的XSS漏洞     上次也提到，解决这个问题的根本在于杜绝不合法的函数在页面内执行。上次透了一下懒，对函数名就行了包含匹配。过程如下：
前后端分离项目解决跨域请求携带cookie的问题
qisoft1213的博客
11-19 3698
前后端分离项目解决跨域请求携带cookie的问题 一、描述：真是一个令人头大的问题，网上百度的大多数方法都是，这样： 前端：withCredentials: true 后端：Access-Control-Allow-Credentials = true；..... 这样做其实也没错，但我这不行，我写的一模一样，可就是不行，o(╥﹏╥)o 最后，我觉得问题可能不在这里，可能是设置cookie的时候除了问题，后来还真是，后来一想，这玩意无非就是 源头->通道->接收，但我一直在整后两个却.
koa开启cors允许跨域，携带cookies
Mar.三月
12-23 1656
使用koa开发想要开启 cors 非常koa开启cors允许跨域，携带cookies简单，已经有对应的库：@koa/cors。 虽然库的readme没有具体介绍具体的用法，但是我们可以通过阅读测试用例知道可以传什么参数，什么类型。 基本用法 const cors = require('@koa/cors') app.use(cors()); 只需要两行，接口就会在返回数据的时候带上Access-Control-Allow-Origin响应头。默认允许所有请求方式跨域，Access-Con.
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值