CORS跨域限制与解除

最新推荐文章于 2025-03-19 14:27:48 发布

Ryrie Lc

最新推荐文章于 2025-03-19 14:27:48 发布

阅读量3.2k

点赞数

文章标签： http

本文链接：https://blog.csdn.net/shiyidemingzij/article/details/108109170

版权

概念

CORS(跨域资源共享)是一种机制，它使用额外的 HTTP 头来告诉浏览器让运行在一个 origin (domain) 上的Web应用被准许访问来自不同源服务器上的指定的资源。
　　发起请求的域与请求指向的域所在的资源不一样，就形成了跨域。
　　域资源常常包括协议、域名（IP）、端口号，若均相同，就是同域，若一个不相同，则是跨域。

跨域请求的安全问题

标签

CORS跨域请求的限制和解决

模拟跨域

我们模拟一个跨域的请求，一个是8888，一个是8887

//server.js
const http = require('http');
const fs = require('fs');
http.createServer(function(req,res){
　　console.log('req come', req.url);
　　const html = fs.readFileSync('test.html', 'utf8');
　　res.writeHead(200,{
　　　　'Content-Type': 'text/html'
　　})
　　res.end(html);
}).listen(8888);

//server2.js
const http = require('http');

http.createServer(function(req,res){
　　console.log('req come', req.url);
　　res.end('123');
}).listen(8887);

然后分别启动这两个服务

<!--test.html-->
<!DOCTYPE html>
<html lang="en">
　　<head>
　　　　<meta charset="UTF-8">
　　　　<meta name="viewport" content="width=device-width, initial-scale=1.0">
　　　　<meta http-equiv="X-UA-Compatible" content="ie=edge">
　　　　<title>Document</title>
　　</head>
　　<body>
　　　　<script>
　　　　　　var xhr = new XMLHttpRequest();
　　　　　　xhr.open('GET', 'http://127.0.0.1:8887');
　　　　　　xhr.send();
　　　　</script>
　　</body>
</html>

html里面发送了一个8887的get请求，在server 8888端口里面读取了html的内容并发送8887的请求，就制造了一个跨域请求

一跨域－设置 “Access-Control-Allow-Origin”

请求以后，控制台提示，No ‘Access-Control-Allow-Origin’ ，‘Access-Control-Allow-Origin’ 是什么呢？就是服务端允许跨域的头，要怎么设置才能让这个跨域请求生效呢？

// server2.js
const http = require('http');

http.createServer(function(req,res){
　　console.log('req come', req.url);
　　res.writeHead(200, {
　　　　'Access-Control-Allow-Origin': '*'
　　})
　　res.end('345');
}).listen(8887);

在server2.js里面设置这个请求头，再从8888里面请求，发现8888里面会开始请求8887，并且没有报错了，这个*是代表所有的网站都可以跨域请求8887,我们可以限制域名，比如’Access-Control-Allow-Origin’: ‘http://localhost:8888’，这里只能设置一个值，不能设置多个，那么想设置多个怎么办呢？可以设置一个值，动态的去判断

这就是符合期望的跨域状态，这里就有一个概念，我们就这么一个操作，就可以使这个跨域请求让server2接受，其实不管server2有没有接受这个请求，8888都会去发送这个8887的请求，只是没看到这个头，会把请求返回内容给忽略掉，在curl并没有这样的限制，这是浏览器跨域的限制

二、跨域-jsonp

是否只有通过这种方式实现跨域呢，显然不是，因为我们知道json这样一个实现方法，那jsonp到底做了什么呢？我们来看一下,8888端口的内容不变

//server2.js
const http = require('http');
http.createServer(function(req,res){
　　console.log('req come', req.url);
　　res.end('345');
}).listen(8887);

server2里面去除掉Access-Control-Allow-Origin，test.html请求的方式改掉

<!--test.html-->
<body>
　　<!-- <script>
　　　　var xhr = new XMLHttpRequest();
　　　　xhr.open('GET', 'http://127.0.0.1:8887');
　　　　xhr.send();
　　</script> -->
　　<script src="http://127.0.0.1:8887"></script>
</body>

再重启8887服务，发现请求使正常发送，也是正常返回的，这是因为，浏览器允许js的跨域请求，他并不在乎跨域的头，所以可以在script里面的代码是一段可执行的js代码，然后去调用jsonp，在发起请求之前，他给我们设置的一些内容，这样就可以达到目的，这就是json的原理，利用了link,script标签的可跨域性