CORS解决跨域

最新推荐文章于 2023-09-29 16:14:27 发布
最新推荐文章于 2023-09-29 16:14:27 发布
阅读量204 收藏
点赞数
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/CS_DGD/article/details/105496817
版权

CORS

什么是CORS：

CORS(Cross-origin resource sharing)，跨域资源共享，是⼀份浏览器技术的规范，⽤来避开 浏览器的同源策略 简单来说就是解决跨域问题的除了jsonp外的另⼀种⽅法；⽐jsonp更加优雅。
我们现在来准备两个服务器和一个前端页面

前端页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>3000端口</h1>
    <button class="btn1">请求非跨域/同源</button>
    <button class="btn2">请求跨域/非同源</button>

    <script>
        document.querySelector(".btn1").onclick = function(){
            let xhr = new XMLHttpRequest();
            xhr.open("post","/post",true);
            xhr.onload = function(){
                console.log(xhr.responseText);
            };
            xhr.send();
        };

        document.querySelector(".btn2").onclick = function(){
            let xhr = new XMLHttpRequest();
            
            xhr.open("post","http://localhost:4000/post",true);// 路径不能写成相对路径
			xhr.onload = function(){
                console.log(xhr.responseText);
            };
            xhr.send();
        }
    </script>
</body>
</html>

两个服务器文件

const Koa = require("koa");
const static = require("koa-static");
const Router = require("koa-router");

let app = new Koa();
let router = new Router();
app.use(static(__dirname+"/static"));

router.get("/",ctx=>{
    ctx.body = "3000端口"
});

router.post("/post",ctx=>{
    ctx.body = "3000端口--同源"
})

app.use(router.routes());
app.listen(3000)

const Koa = require("koa");
const static = require("koa-static");
const Router = require("koa-router");
const koaBody = require("koa-body")

let app = new Koa();
let router = new Router();
app.use(static(__dirname + "/static"));
app.use(koaBody());

router.get("/index", ctx => {
    ctx.body = "4000端口"
});
router.post("/post",ctx=>{
    ctx.body = "4000端口--非同源"
})


app.use(router.routes());
app.listen(4000)

注意点： 两个服务器文件都要打开

浏览器反馈

结论 这种情况呢跨域是请求成功了，但是我们为什么拿不到数据？因为跨域是一种浏览器行为，服务器端没有跨域、同源这种说法，浏览器基于同源策略所以没有响应，所以除了jsonp这种方法外就是我们今天要了解的CORS

CORS的处理也非常简单
我们只需要在4000端口的服务器文件里设置一下头部信息就可以了

router.post("/post",ctx=>{
    // 允许跨域
    ctx.set("Access-Control-Allow-Origin","*"); 
    ctx.body = "4000端口--非同源"
})

浏览器反馈
在这里插入图片描述
注意点！！！

  1. 不安全——如果设置成这样就相当于把浏览器的同源策略毁掉，全世界都可以找到你并获取到你的数据
  2. 不能携带凭证（待会会说到凭证是什么）

综上所述 我们一般不这样设置，我们需要给他设置成指定的

router.post("/post",ctx=>{
    // 1. 允许跨域
    // ctx.set("Access-Control-Allow-Origin","*"); 
    ctx.set("Access-Control-Allow-Origin","http://loaclhost:3000");

    ctx.body = "4000端口--非同源"
});

现在我们从新回到页面来说，来获取返还头部信息

		document.querySelector(".btn2").onclick = function(){
            let xhr = new XMLHttpRequest();
            xhr.open("post","http://localhost:4000/post",true);// 路径不能写成相对路径
			xhr.onload = function(){
                console.log(xhr.responseText);
                // 获取返还头部信息
                let res = xhr.getAllResponseHeaders();
                console.log(res);
            };
            xhr.send();
        }

浏览器反馈
在这里插入图片描述
但是头部信息还是挺多的，没有获取完整
在这里插入图片描述
所以这个方法不能获取到所有的头部信息 但是这不是方法的问题，这是服务器端在你想要获取到这些信息做功能是，服务器不让你获取到，所以我们还是在设置一下，允许获取头部信息

router.post("/post",ctx=>{
    // 1. 允许跨域
    // ctx.set("Access-Control-Allow-Origin","*"); 
    ctx.set("Access-Control-Allow-Origin","http://localhost:3000");

    // 2. 允许获取头部信息
    ctx.set("Access-Control-Expose-Headers", "Content-Type,Content-Length,Date");

    ctx.body = "4000端口--非同源"
});

浏览器反馈
在这里插入图片描述
CORS的其他设置指令

router.post("/post", ctx => {

	// 1. 允许跨域
    ctx.set("Access-Control-Allow-Origin", "http://localhost:3000");

    // 2.允许获取的头部信息(响应)
    ctx.set("Access-Control-Expose-Headers", "Content-Type,Content-Length,Date");

    // 3.设置允许前端发送的请求方式
    ctx.set("Access-Control-Allow-Methods","GET,DELETE,HEAD,OPTIONS");
    
    // 4.允许前端设置的头部(请求)
    ctx.set("Access-Control-Allow-Headers","Content-Type,Content-Length,text");

    ctx.body = "4000端口--非同源";
});

允许携带凭证 后端的服务器需要设置一下，前端的页面也需要开启一下

xhr.withCredentials = true;	//写在前端页面
ctx.set("Access-Control-Allow-Credentials",true);	//写在后端页面

预检请求

开启默认

		document.querySelector(".btn2").onclick = function(){
            /*
                跨域：请求成功了
                跨域是浏览器行为，服务器端没有跨域、同源这种说法
            */ 
            let xhr = new XMLHttpRequest();
            xhr.open("post","http://localhost:4000/post",true);// 路径不能写成相对路径

            // 设置请求头部
            xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
            
            // 允许跨域请求携带凭证
            xhr.withCredentials = true;

			xhr.onload = function(){
                console.log(xhr.responseText);
                // 获取返还头部信息
                let res = xhr.getAllResponseHeaders();
                console.log(res);
            };
            xhr.send();
        }

浏览器反馈
在这里插入图片描述
修改请求头

document.querySelector(".btn2").onclick = function(){
            /*
                跨域：请求成功了
                跨域是浏览器行为，服务器端没有跨域、同源这种说法
            */ 
            let xhr = new XMLHttpRequest();
            xhr.open("post","http://localhost:4000/post",true);// 路径不能写成相对路径

            // 设置请求头部
            xhr.setRequestHeader("Content-Type","application/json");
            
            // 允许跨域请求携带凭证
            xhr.withCredentials = true;

			xhr.onload = function(){
                console.log(xhr.responseText);
                // 获取返还头部信息
                let res = xhr.getAllResponseHeaders();
                console.log(res);
            };
            xhr.send();
        }

浏览器反馈
在这里插入图片描述
这种情况属于预检请求

什么是预检请求 是一种请求方式，不再是get与post了，而是options

  1. 你要去处理一下options 它和get与post一样，也会发起一个请求
  2. 你要去允许前端设置头部信息

处理预检请求

router.options("/*",ctx=>{
    // 1. 允许跨域
    ctx.set("Access-Control-Allow-Origin", "http://localhost:3000");

    // 2. 允许获取的头部信息(响应)
    ctx.set("Access-Control-Expose-Headers", "Content-Type,Content-Length,Date");

    // 3. 设置允许前端发送的请求方式
    ctx.set("Access-Control-Allow-Methods","GET,DELETE,HEAD,OPTIONS");
    
    // 4. 允许前端设置的头部(请求)
    ctx.set("Access-Control-Allow-Headers","Content-Type,Content-Length,text");

    // 5. 允许携带凭证
    ctx.set("Access-Control-Allow-Credentials",true);

    console.log("有预检请求");
    ctx.body = "";
})

什么时候会出现预检请求

  1. 指定的请求类型是(PUT、DELETE、CONNECT、OPTIONS、TRACE、PATCH)
  2. 修改了指定的属性
  3. 修改指定的属性值

整体思路导图

在这里插入图片描述
注意 CORS内除了手动设置允许跨域是必须要写的，其他的都是看自己需求。

必须是下面定义对CORS安全的首部字段集合，不能是集合之外的其他首部字段。
Accept、Accept-Language、Content-Language、Content-Type、DPR、Downlink、Save-Data、Viewport-Width、Width。

Content-Type的值必须是text/plain、multipart/form-data、application/x-www-form-urlencoded中任意一个值

满足上面所有的条件才不会发送预检请求，在实际项目中我们的请求格式可能是application/json格式编码，或者使用自定义请求头都会触发CORS的预检请求。

所以，在项目中是否会触发CORS的预检请求要做到心中有数。

X可乐
关注
Node.js使用CORS解决跨域问题的三种方法
Zhang_wang_yun的博客
04-24 4395
CORS出现的较晚，它是W3C标准，属于跨域Ajax请求的根本解决方案。支持GET和POST请求。缺点是不兼容某些低版本的浏览器。
express服务器中的cors解决跨域步骤---express后端解决跨域问题的方法cors
angrynouse的博客
08-06 2213
代码】express服务器中的cors解决跨域步骤---express后端解决跨域问题的方法cors。
总结-使用CORS解决跨域问题
weixin_48726650的博客
07-18 1307
对前端来说跨域应该是不陌生的，解决跨域的方案有很多种。而我司前端接口调用也正是CORS的方式，所以难免在联调阶段会遇见一些CORS跨域的问题，下面通过一个简单的demo验证一下CORS解决跨域的过程中，对一些不清楚的知识点做一个简单的总结 示例 demo 已经放在GitHub 上, 其中目录client文件夹托管客户端代码、server目录作为处理CORS的服务端，分别把两端的代码跑起来，就可以进行CORS相关配置的学习了 对CORS的了解可以先看下一下阮老师的这两篇文章: 1、浏览器同源政策及其规避方.
跨域解决方案CORS
weixin_43393933的博客
01-01 280
跨域解决方案CORS
cors解决跨域问题
weixin_49405038的博客
03-10 152
由于XHR对象被W3C标准化之后，提出了很多XHR Level2的新构想，其中新增了很多新方法（onload、response…）和CORS跨域资源共享。浏览器升级后开始支持CORS方案。 CORS才是解决跨域的真正解决方案。 代码： 前端：正常请求； 后台：设置请求头； // ---------------------------------前端代码 $.ajax({ url: 'http://localhost:3006/api/cors', success: fun..
处理 CORS 跨域请求
weixin_45816407的博客
07-07 425
CORS是一个W3C标准，全称是”跨域资源共享”（Cross-origin resource sharing），允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。它通过服务器增加一个特殊的Header[Access-Control-Allow-Origin]来告诉客户端跨域的限制，如果浏览器支持CORS、并且判断Origin通过的话，就会允许XMLHttpRequest发起跨域请求。
跨域问题详解：CORS问题+解决办法
最新发布
weixin_45565886的博客
09-29 1万+
跨域问题详解：CORS问题+解决办法
CORS解决跨域问题（403问题）
04-04
Tomcat lib目录下添加cors-filter-1.7.jar，java-property-utils-1.9.jar这两个jar包，项目中web.xml 中添加filter，以及出现OPTIONS 类型的请求并返回403的解决方案；压缩文件包含jar文件，以及web.xml配置。
django基于cors解决跨域请求问题详解
09-18
下面将详细介绍这两个概念以及在Django项目中如何基于CORS解决跨域请求问题。 同源策略是浏览器的一种安全策略，当浏览器从一个域名的页面去请求另一个不同域名的资源时，会受到同源策略的限制。如果这两个页面具有...
Django通过设置CORS解决跨域问题
01-19
一、Ajax 跨域请求 Ajax 请求一个目标地址为... 后端解决（Django）：CORS 专门解决方案 这篇文章主要介绍使用 Django 框架进行开发时的后端解决方案。 三、Django 解决跨域问题 Django 框架中通过 django-cors-head
1、window.open跨域问题解决方式
qq_36831305的博客
02-13 9648
window.open跨域问题解决
CORS跨域问题原因和解决方案
热门推荐
蔚然成风
06-21 1万+
Springboot跨域问题，是当前主流web开发人员都绕不开的难题。但我们首先要明确以下几点 - 跨域只存在于浏览器端，不存在于安卓/ios/Node.js/python/ java等其它环境 - 跨域请求能发出去，服务端能收到请求并正常返回结果，只是结果被浏览器拦截了。 - 之所以会跨域，是因为受到了同源策略的限制，同源策略要求源相同才能正常进行通信，即协议、域名、端口号都完全一致。 浏览器出于安全的考虑，使用 XMLHttpRequest对象发起 HTTP请求时必须遵守同源策略，否则就是跨域的HTT
使用CORS解决跨域问题
weixin_43896929的博客
12-03 858
使用CORS解决跨域问题 最近在学习Vue时候，为了编写代码方便，所以在HBuilderX编写前端代码，但如果要访问后端数据，就会遇到跨域的问题，所以记录下关于使用CORS解决跨域问题，方便后面使用（粘贴方便​????） 什么是跨域 跨域是指跨域名的访问，以下情况都属于跨域： 跨域原因说明 示例 域名不同 www.jd.com 与 www.taobao.com 域名相同，端口不同 www.jd.com:8080 与 www.jd.com:8081 二级域名不同 item.jd.c
CORS跨域请求及实现机制
笑释一切的博客
01-03 1万+
一、什么是CORS CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。只要服务器实现了CORS接口，就可以跨源通信。 CORS有两种请求，简单请求和非简单请求。 二、同源 跨域就等于从百度访问谷歌的资源，URL由协议、域名、端口和路径组...
解决JS 跨域调用解决方案之二: CORS
py_tamir的博客
08-05 1万+
之前文章使用JSONP 技术来解决， 本文使用CORS技术来解决js跨域调用问题。 1、js跨域请求：      只要协议、域名、端口有任何一个不同，都被当作是不同的域。 2、跨域调用测试： 前端控制台出现 以下信息，表示不能跨域访问：   No 'Access-Control-Allow-Origin' header is present on the requested resour...
使用CORS来进行跨域AJax请求
冷月宫主的专栏
05-12 1956
以前出于安全考虑，javascript的Ajax请求都必须是同域下的，为了解决跨域请求大家无所不用其极，什么jsonp, 代理都是大家常用的方法，跨域需求这么大，于是现在还是搞了个CORS的跨域技术了。 Cross-Origin Resource Sharing (CORS) Cross-Origin Resource Sharing (CORS) 是W3C草案拟定的浏览器与服务端如何
利用CORS解决跨域问题
zheng_qq的博客
09-19 1038
跨域错误原因及解决思路 什么原因导致了浏览器报跨域错误： 跨域错误:不同源的ajax请求 浏览器向web服务器发起http请求时 ，如果同时满足以下三个条件时，就会出现跨域问题，从而导致ajax请求失败： （1）请求响应双方url不同源。 双方url：发出请求所在的页面 与 所请求的资源的url 同源是指：协议相同，域名相同，端口相同 都相同。 以下就是不同源的： 从http://127.0.0.1:5500/mes...
Delphi IdHttpServer解决 Http请求跨域问题
重楼的博客
09-09 1406
//Response 增加允许跨域请求头属性，即可允许跨域访问 procedure TMain.idHttpServerCommandGet(AContext: TIdContext; ARequestInfo: TIdHTTPRequestInfo; AResponseInfo: TIdHTTPResponseInfo); begin AResponseInfo.CustomHeaders.Add('Access-Control-Allow-Origin:*'); ARespo.
前端cors解决跨域
07-28
在前端中，可以通过以下几种方式来解决跨域问题： 1. 代理服务器：在你的服务器中设置一个代理服务器，将前端请求发送给代理服务器，再由代理服务器发送请求到目标服务器。这样就避免了浏览器的同源策略限制。 2. JSONP：如果目标服务器支持JSONP，你可以通过动态创建一个`<script>`标签，将请求发送到目标服务器，并指定一个回调函数来处理返回的数据。这样可以绕过同源策略。 3. CORS（跨域资源共享）：如果目标服务器支持CORS，你可以在请求头中添加`Origin`字段，并且目标服务器需要在响应头中添加`Access-Control-Allow-Origin`字段来允许跨域请求。这样浏览器会根据响应头判断是否允许跨域请求。 4. WebSocket：如果目标服务器支持WebSocket协议，你可以使用WebSocket进行跨域通信。WebSocket协议并不受同源策略限制。 以上是一些常见的解决跨域问题的方法，具体选择哪种方法取决于你的项目需求和目标服务器的支持情况。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值