cors是什么意思js

CORS，全称为Cross-Origin Resource Sharing（跨域资源共享），是一种允许浏览器向跨源服务器发出XMLHttpRequest（XHR）或Fetch API跨域HTTP请求的W3C标准，这一机制旨在克服同源策略的限制，使得不同源之间的资源能够进行交互和共享。

CORS的基本原理

CORS通过在HTTP请求头中添加特定的字段来告知服务器，当前请求是跨域请求，并询问服务器是否允许该请求，如果服务器允许该跨域请求，则会在响应头中包含相应的允许信息，浏览器根据这些信息决定是否允许前端JavaScript代码获取响应数据，整个CORS通信过程由浏览器自动完成，无需用户参与。

CORS中的两种请求类型

浏览器将CORS请求分为简单请求和非简单请求两类：

1、简单请求：当满足以下条件时，CORS请求被视为简单请求：

请求方法是GET、POST或HEAD之一。

HTTP头信息不超过特定字段集（如Accept、Accept-Language、Content-Language等）。

Content-Type头信息仅限于text/plain、multipart/form-data或application/x-www-form-urlencoded之一。

请求中没有使用自定义头部字段（如X-Custom-Header）。

请求不包含事件监听器或ReadableStream对象。

对于简单请求，浏览器会自动在请求头中添加一个Origin字段，用于说明本次请求来自哪个源（协议+主机+端口），服务器根据这个值决定是否同意这次请求，如果Origin指定的源不在许可范围内，服务器会返回一个正常的HTTP回应，浏览器发现响应头中没有包含Access-Control-Allow-Origin字段时，就会抛出一个错误。

2、非简单请求：凡是不同时满足上述条件的请求都属于非简单请求，非简单请求的CORS请求会在正式通信之前增加一次HTTP查询请求，称为“预检”请求（preflight），浏览器先询问服务器，当前网页所在的域名是否在服务器的许可名单之中，以及可以使用哪些HTTP动词和头信息字段，只有得到肯定答复后，浏览器才会发出正式的XMLHttpRequest请求，否则就报错。

CORS相关的HTTP头信息

在CORS请求中，有几个关键的HTTP头信息需要关注：

1、Access-Control-Allow-Origin：该字段用于指示服务器允许哪些源可以访问该资源，其值可以是具体的域名（如https://example.com），也可以是通配符*（表示允许所有域名访问），如果服务器返回的响应头中不包含该字段，或者该字段的值与请求中的Origin字段不匹配，则浏览器会阻止访问该资源。

2、Access-Control-Allow-Methods：该字段用于指定服务器支持的HTTP方法（如GET、POST、PUT等），这对于非简单请求尤为重要，因为非简单请求需要先发送一个预检请求来询问服务器是否支持相应的HTTP方法。

3、Access-Control-Allow-Headers：该字段用于指定服务器允许客户端在请求中发送的自定义头部字段，这对于需要发送额外头部信息的非简单请求非常有用。

4、Access-Control-Expose-Headers：该字段用于指定服务器在响应中暴露给客户端的头部字段，这通常用于返回一些额外的信息给前端应用程序。

5、Access-Control-Max-Age：该字段用于指定预检请求的缓存时间（以秒为单位），在该时间段内，浏览器可以直接使用缓存中的预检结果而不需要再次发送预检请求。

CORS的实战应用

在实际开发中，CORS的应用非常广泛，在一个前后端分离的Web应用中，前端可能运行在一个域名下（如http://localhost:8080），而后端API则运行在另一个域名下（如http://api.example.com），为了实现前后端的通信，就需要配置CORS。

在Node.js环境下，可以使用Express框架来快速搭建一个简单的服务器并配置CORS。

const express = require('express');
const app = express();
app.use((req, res, next) => {
    res.header("Access-Control-Allow-Origin", "*"); // 允许所有域名访问
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    res.header("Access-Control-Allow-Methods", "PUT, POST, GET, DELETE, OPTIONS");
    next();
});
app.get('/', (req, res) => {
    res.send('Hello World!');
});
app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

代码创建了一个简单的Express服务器，并通过中间件设置了CORS相关的响应头信息，这样，无论前端从哪个域名发起请求，都会被允许访问该服务器上的资源。

相关FAQs

1、什么是CORS？

答：CORS（Cross-Origin Resource Sharing）是一种允许浏览器向跨源服务器发出XMLHttpRequest请求的W3C标准，它克服了同源策略的限制，使得不同源之间的资源能够进行交互和共享。

2、CORS中的简单请求和非简单请求有什么区别？

答：简单请求是指满足特定条件的CORS请求，如使用GET、POST或HEAD方法，且HTTP头信息不超过特定字段集等，非简单请求则不满足这些条件，需要在正式通信之前增加一次HTTP查询请求（即“预检”请求）来询问服务器是否允许该请求。

3、如何配置CORS？

答：CORS的配置通常在服务器端进行，开发者可以通过设置HTTP响应头中的特定字段（如Access-Control-Allow-Origin、Access-Control-Allow-Methods等）来控制哪些源可以访问服务器上的资源以及允许使用哪些HTTP方法和头部字段。

具体配置方法因服务器技术和框架而异，但大多数现代Web框架都提供了方便的方法来配置CORS。