jQuery支持CORS|极客教程

jQuery支持CORS

在Web开发中，跨源资源共享（CORS）是一个重要的话题。它允许浏览器向另一个域名的服务端请求资源，即使这个域名与当前页面所在的域名不同。这种机制是为了解决同源策略导致的限制，同源策略限制了一个页面只能与同域的服务器交互。

在早期的Web开发中，如果想要从一个域名获取资源，通常需要使用JSONP或代理服务器等方法。但随着跨域资源共享（CORS）的出现，现在可以更加简单地实现跨域请求，而不用借助其他方式。

CORS是什么

CORS 是一种浏览器技术，全称是Cross-Origin Resource Sharing（跨域资源共享），用于实现一个web页面可以与不同源的服务器进行交互。只有在服务器端设置了CORS规则，浏览器才能允许跨域请求。

CORS 请求分为简单请求和非简单请求两种。简单请求满足以下条件：

使用以下任意一种请求方法：GET、HEAD、POST
Content-Type的值是 application/x-www-form-urlencoded、multipart/form-data、text/plain
请求中的头信息不超出以下字段：Accept、Accept-Language、Content-Language、Content-Type（限于以下三个值：application/x-www-form-urlencoded、multipart/form-data、text/plain）

对于简单请求，浏览器会自动在请求头中添加一个Origin字段，用来表明该请求的来源。如果服务器接受来自该来源的请求，就会在响应头中返回一个Access-Control-Allow-Origin字段，指定允许的跨域来源。这样浏览器就会允许请求成功。

jQuery支持CORS

jQuery从1.5版本开始，就开始支持跨域请求。在发送AJAX请求时，可以通过设置crossDomain属性来实现：

$.ajax({
    url: 'https://api.example.com/data',
    type: 'GET',
    crossDomain: true,
    success: function(data) {
        console.log(data);
    },
    error: function(xhr, status, error) {
        console.log('Error: ' + error);
    }
});

以上代码示例展示了一个简单的跨域GET请求。设置crossDomain为true表示允许跨域请求，如果目标服务器支持并返回了正确的Access-Control-Allow-Origin响应头，那么请求就会成功。

如果要发送跨域POST请求，也可以通过设置crossDomain属性来实现：

$.ajax({
    url: 'https://api.example.com/data',
    type: 'POST',
    crossDomain: true,
    data: {
        name: 'Alice',
        age: 25
    },
    success: function(data) {
        console.log(data);
    },
    error: function(xhr, status, error) {
        console.log('Error: ' + error);
    }
});

以上代码示例展示了一个简单的跨域POST请求，通过设置data字段可以传递参数到目标服务器。

CORS在服务器端的设置

除了在前端使用jQuery来发送CORS请求，服务器端也需要配置相应的规则来允许跨域请求。常见的服务器端语言都提供了相应的设置方式。

在Node.js中，可以使用npm包cors来快速实现CORS支持。首先安装cors包：

npm install cors

然后在服务器端代码中引入cors包并设置相关规则：

const express = require('express');
const cors = require('cors');
const app = express();

app.use(cors());

// 允许所有源访问
app.options('*', cors());

// 允许特定源访问
app.get('/data', cors({
    origin: 'https://example.com'
}), function(req, res) {
    res.send('Data response');
});

app.listen(3000, function() {
    console.log('Server is running on port 3000');
});

以上代码示例使用Express框架和cors包来实现CORS支持。app.use(cors())表示允许所有源访问，app.options('*', cors())表示对所有请求启用CORS预检（Preflight）请求，app.get('/data', cors({ origin: 'https://example.com' }), ...)表示只允许example.com域访问数据接口。