JavaScript - CORS 处理

跨域资源共享 (CORS) 是一项浏览器级安全功能，默认情况下会阻止跨域查询，例如前端客户端查询托管在不同源或域上的后端服务器。

我们可以使用多种策略来避免或启用跨域查询。在本章中，我们将使用代码示例演示如何在 JavaScript 中处理 CORS。

什么是 CORS?

CORS 是 Web 浏览器中的一项安全功能，用于阻止恶意网站向其他域发出不必要的请求。它维护同源策略，从而阻止网页向服务于该页面的域以外的域发送请求。CORS 使服务器能够指定哪些用户可以访问其资源。

CORS 的重要性

CORS 对于安全性至关重要，但在 Web 开发和 API 使用过程中，它可能难以实现。开发人员在尝试访问来自多个域的资源时会遇到问题。让我们来分析一下这些常见问题及其解决方案。

使用 Express 服务器处理 CORS

在本方法中，我们将开发并使用 NodeJS 和 ExpressJS 服务器来处理 CORS 请求。为了接受来自任何来源的请求，我们可以在每个响应对象头中添加"Access-Control-Allow-Origin"标头。

示例

首先，您需要按照以下步骤安装应用程序所需的软件包 -

npm init -y
npm i express

创建 index.js 文件: 创建 index.js 文件并设置 express 服务器。允许所有请求的"Access-Control-Allow-Origin"响应标头传递到同一文件。

const express = require('express');
const server = express();

server.use((request, response, proceed) => {
   response.header('Access-Control-Allow-Origin', '*');
   response.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
   response.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
   proceed();
});

server.get('/info', (request, response) => {
   response.json({country: 'India', currencyCode: 'INR'});
});
server.listen(3000, () => {
   console.log('Application is live on port 3000');
});

运行 Express API 服务器:现在，您需要使用以下命令启动服务器。

npm start

创建原生 JS 应用程序:现在，您需要创建一个原生 JavaScript 应用程序来使用上述 API 服务器端点。为此，您需要在终端中运行以下命令来创建用于创建 JS 应用程序的基本结构。

mkdir cors-test
cd cors-test
touch index.html

现在，更改项目结构的 index.html 文件，以便从 Express API 服务器请求数据并将其显示在用户界面中。

index.html 文件如下所示 -

<!DOCTYPE html>
<html lang="en">
   <body>
      <h1>Data from Server</h1>
      <div id="infoDisplay"></div>
      <script>
         document.addEventListener('DOMContentLoaded', () => {
            const infoContainer = document.getElementById('infoDisplay');
            fetch('http://localhost:3000/info').then(serverResponse => serverResponse.json()).then(info => {
               const {
                  country,
                  currencyCode
               } = info;
               infoContainer.innerHTML = `
                     
      	<p>Country: ${country}</p>
      	<p>Currency Code: ${currencyCode}</p>
                  `;
            }).catch(fetchError => {
               console.warn('Failed to retrieve data:', fetchError);
               infoContainer.innerHTML = ' < p > Error retrieving data.Please
               try again later. < /p>';
            });
         });
      </script>
   </body>
</html>

运行 Vanilla JS 应用程序:现在，您可以打开上面创建的 index.html 文件，并在浏览器中查看输出。

输出

这将生成以下结果 -

常见的 CORS 问题

以下列出了一些常见问题供您参考 -

CORS 阻止了未经授权的访问

最常见的 CORS 问题之一是在浏览器控制台中收到错误"从源"Origin"访问位于"URL"的 XMLHttpRequest 已被 CORS 策略阻止"。

要解决此问题，您需要设置服务器以提供所需的 CORS 标头，以允许从请求源进行访问。

示例使用 Node.js 和 Express.js

以下是使用 node.js 和 express.js 的示例 -

const express = require('express');
const server = express();

// 为特定来源启用 CORS
server.use((request, response, proceed) => {
   response.setHeader('Access-Control-Allow-Origin', 'https://example.com');
   response.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
   response.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
   // 如果需要 cookie
   response.setHeader('Access-Control-Allow-Credentials', 'true'); 
   proceed();
});

// 您的 API 路由
server.get('/api/info', (request, respond) => {
	// 您的响应逻辑
   response.json({ details: 'Information from the server' });
});

server.listen(3000, () => {
   console.log('Application active on port 3000');
});

在此示例中，我们通过提供标头为给定源 (https://example.com) 启用了 CORS。这使得来自 https://example.com 的请求能够访问服务器资源。

缺少 CORS 标头

有时服务器在响应时无法包含所需的 CORS 标头，导致浏览器阻止该请求。

请确保您的服务器在其响应中包含必要的 CORS 标头，以允许跨域查询。

使用 Node.js 和 Express.js 的示例

以下是使用 node.js 和 express.js 的示例 -

const express = require('express');
const server = express();

// 为所有响应添加 CORS 标头
server.use((request, response, proceed) => {
   response.setHeader('Access-Control-Allow-Origin', '*'); 
   response.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
   response.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
   // 如果需要 cookie
   response.setHeader('Access-Control-Allow-Credentials', 'true'); 
   proceed();
});

// 您的 API 路由
server.get('/api/info', (request, respond) => {
	// 您的响应逻辑
   response.json({ info: 'Information from the server' });
});

server.listen(3000, () => {
   console.log('Application is now active on port 3000');
});

在本例中，使用中间件将 CORS 标头添加到所有响应中，从而允许来自任何来源的请求。但出于安全考虑，在生产环境中必须限制可接受的来源。