跨域请求的烦恼？CORS，一键搞定！

2023-11-06 15:35:23

CORS，跨域的救世主

跨域，即跨源资源共享（Cross-Origin Resource Sharing），一直是前端开发中绕不开的问题。当浏览器试图从一个源获取资源时，如果该资源的来源与当前页面的来源不同，就会触发跨域限制。这种限制是为了保护用户安全，防止恶意网站窃取敏感信息。

在跨域请求中，浏览器会发送一个预检请求（preflight request）到服务器，询问服务器是否允许跨域请求。服务器会返回一个响应头，其中包含了允许跨域请求的详细信息，如允许的请求方法、头字段等。如果服务器允许跨域请求，浏览器将发送实际的请求。

CORS的出现，为跨域请求带来了福音。CORS是一种浏览器和服务器之间的协议，它允许服务器指定哪些源可以访问其资源。通过在服务器端设置CORS响应头，可以控制跨域请求的访问权限。

CORS的妙用

CORS机制具有以下优点：

简单易用： CORS的实现非常简单，只需在服务器端设置CORS响应头即可。
兼容性强： CORS得到了所有主流浏览器的支持，具有广泛的兼容性。
安全可靠： CORS可以有效地防止跨站请求伪造（CSRF）攻击，保护用户安全。

CORS的应用场景

CORS在实际开发中，有着广泛的应用场景，例如：

跨域Ajax请求： 使用Ajax技术进行跨域请求时，需要在服务器端设置CORS响应头，以允许跨域请求。
JSONP跨域请求： JSONP是一种利用<script>标签实现跨域请求的技术，常用于获取JSON格式的数据。
跨域文件上传： 跨域文件上传需要用到CORS，以允许浏览器将文件上传到其他源的服务器。
跨域WebSocket连接： WebSocket是一种双向通信协议，在建立跨域WebSocket连接时，需要用到CORS。

CORS的设置方式

在服务器端设置CORS响应头的方式，根据不同的服务器环境而有所不同。以下是几种常见的服务器环境的CORS设置方法：

Nginx： 在Nginx中，可以在配置文件中添加以下指令来设置CORS：

add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization';
add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS';

Apache： 在Apache中，可以在.htaccess文件中添加以下指令来设置CORS：

Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Headers "Content-Type, Authorization"
Header set Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS"

Node.js： 在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', 'Content-Type, Authorization');
  res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
  next();
});