cros解决跨域的原理

CORS（Cross-Origin Resource Sharing，跨域资源共享）是一种解决跨域问题的技术。在同源策略（Same-Origin Policy）下，浏览器默认情况下只允许相同域名、协议和端口的网页对资源进行访问，但在实际开发中，很多情况下需要跨域访问资源，这时就需要借助CORS来实现。

CORS的原理是通过在HTTP头部添加一些特殊的字段，来告诉浏览器是否允许跨域请求。跨域请求分为简单请求和复杂请求两种情况。

简单请求是指满足以下条件的请求：请求方法只能是GET、POST、HEAD；HTTP头只能包含Accept、Accept-Language、Content-Language、Content-Type四种字段；Content-Type的值只能是application/x-www-form-urlencoded、multipart/form-data、text/plain中的一种；请求中的任意XMLHttpRequestUpload对象都没有被监控；请求中没有使用ReadableStream对象。

简单请求不会触发CORS预检请求（preflight request），直接发送跨域请求即可。服务器通过响应头部返回允许跨域资源访问的信息，浏览器根据这些信息决定是否允许响应数据被网页访问。

复杂请求是指不满足简单请求条件的请求，例如请求方法是PUT或DELETE，或者请求头包含自定义字段。复杂请求会在正式请求之前发送一个预检请求（OPTIONS请求），用于确认服务器是否允许跨域请求。预检请求会带上一个包含实际请求所用到的方法、头部字段和其他元数据的请求头部，服务器会根据这些信息进行验证后返回响应。

在预检请求的响应中，服务器会返回一个Access-Control-Allow-Origin字段，用来指定允许访问该资源的域名。如果Origin字段不在允许的域名列表中，浏览器会拒绝该请求。

此外，还有一些其他的CORS相关的响应头字段：

- Access-Control-Allow-Methods：指定允许的请求方法。

- Access-Control-Allow-Headers：指定允许的请求头字段。

- Access-Control-Allow-Credentials：指定是否允许浏览器发送包含凭据（如cookie或HTTP认证信息）的请求。

下面通过一个案例来说明CORS的具体用法：

假设我们有两个域名，http://www.example.com 和 http://www.api.com，现在http://www.example.com需要从http://www.api.com获取数据。

首先，在后端代码中，我们需要在响应头部添加Access-Control-Allow-Origin字段，值为http://www.example.com，即允许http://www.example.com访问该资源。

以Node.js为例：

```

const http = require('http');

http.createServer((req, res) => {

res.writeHead(200, {

'Access-Control-Allow-Origin': 'http://www.example.com',

'Content-Type': 'text/plain'

});

res.end('Hello World!');

}).listen(3000);

```

然后，在前端代码中，我们可以使用XMLHttpRequest或Fetch API发送跨域请求。浏览器会自动添加Origin字段，并检查Access-Control-Allow-Origin字段是否与Origin字段匹配。

以JavaScript为例：

```

fetch('http://www.api.com/data')

.then(response => response.text())

.then(data => console.log(data))

.catch(error => console.log(error));

```

这样，http://www.example.com就可以从http://www.api.com获取数据了。

总结：

CORS通过在HTTP头部添加特殊字段来实现跨域访问，其中简单请求和复杂请求采用不同的处理方式。后端需要在响应头部添加Access-Control-Allow-*字段，前端可以使用XMLHttpRequest或Fetch API发送跨域请求。通过使用CORS，我们可以安全地实现跨域访问资源。 如果你喜欢我们三七知识分享网站的文章， 欢迎您分享或收藏知识分享网站文章 欢迎您到我们的网站逛逛喔！https://www.37seo.cn/