悠悠楠杉
网站页面
微信浏览器跨域资源共享（CORS）的解决方案与实践
03/14
一、了解CORS
跨域资源共享（CORS）是一种机制，它使用额外的HTTP头来告诉浏览器允许一个网页上的脚本访问不同源服务器上的资源。在默认情况下，出于安全考虑，浏览器会阻止跨域请求。CORS主要包含以下两个方面：
- 简单请求：只涉及GET、HEAD、POST方法，且内容类型为
application/x-www-form-urlencoded、multipart/form-data、text/plain。 - 预检请求（Preflight Requests）：对于复杂请求（如PUT、DELETE等），浏览器会先发送一个OPTIONS请求，询问服务器是否允许跨域请求。
二、服务器端配置CORS
在服务器端配置CORS，主要涉及到以下几个HTTP头：
- Access-Control-Allow-Origin：必须指定为
*或具体的域名，以允许来自哪个域的访问。 - Access-Control-Allow-Methods：指定可以接受哪些HTTP方法。
- Access-Control-Allow-Headers：如果请求是预检的，则服务器需要声明它接受的头部信息。
- Access-Control-Max-Age：预检请求的结果可以缓存多长时间。
示例代码（Node.js + Express）：
```javascript
const express = require('express');
const cors = require('cors');
const app = express();
// 允许所有来源的访问（生产环境应指定具体域名）
app.use(cors({ origin: true })); // 启用cors中间件，简化配置
// 或者手动设置CORS选项：
app.options('*', cors({ origin: 'http://example.com', methods: 'GET,POST,PUT,DELETE' })); // 预检请求处理
app.get('/data', (req, res) => {
res.json({ message: 'This is CORS-enabled for http://example.com' }); // 响应数据给指定来源的请求
});
app.listen(3000, () => {
console.log('Server is running on http://localhost:3000');
});
```
三、使用JSONP实现跨域（已逐渐被CORS取代）
JSONP是另一种实现跨域的方法，但它不如CORS安全且已逐渐被淘汰。基本思想是通过script标签的src属性来加载一个URL，这个URL指向一个返回JavaScript函数的接口。由于script标签不受同源策略的限制，因此可以实现跨域数据的获取。但请注意，JSONP仅限于GET请求。
```html
```
四、预检请求处理策略（Preflight Requests）及示例实现
对于更复杂的跨域请求，如使用自定义HTTP头部或POST方法，浏览器会自动发送一个OPTIONS预检请求到服务器。服务器必须正确处理这个预检请求，返回200 OK和正确的CORS头部信息，才能让实际的请求通过。这可以通过设置Access-Control-Allow-Origin等HTTP头来实现。示例如上Node.js代码所示。
