CORS跨源资源共享：从服务器设置到客户端请求，轻松搞定图像跨域访问

CORS（跨源资源共享）是一种W3C标准，它允许一个域上的资源（比如图像、视频或文本文件）被其他域上的JavaScript代码访问。这通常被称为“跨域请求”。 要在浏览器中使用CORS来请求图像，你需要在服务器上设置适当的响应头。这些响应头告诉浏览器该资源可以被其他域上的JavaScript代码访问。 以下是一个简单的示例，展示了如何在Node.js服务器上设置CORS响应头： ```javascript const express = require('express'); const app = express(); app.use((req, res, next) => { res.setHeader('Access-Control-Allow-Origin', '*'); res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE'); res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type'); next(); }); app.get('/image.jpg', (req, res) => { res.sendFile(__dirname + '/image.jpg'); }); app.listen(3000, () => console.log('Server started on port 3000')); ``` 在这个示例中，我们首先导入了Express模块，并创建了一个新的Express应用。然后，我们使用`app.use()`方法添加了一个中间件，该中间件设置了一些CORS响应头。我们定义了一个路由处理函数，该函数发送一个图像文件作为响应。 现在，你可以在客户端的JavaScript代码中使用`fetch()`或`XMLHttpRequest`来请求这个图像： ```javascript fetch('http://localhost:3000/image.jpg') .then(response => response.blob()) .then(blob => { let objectURL = URL.createObjectURL(blob); let image = document.createElement('img'); image.src = objectURL; document.body.appendChild(image); }); ``` 在这个示例中，我们使用`fetch()`函数来发送一个GET请求到服务器上的`/image.jpg`路由。然后，我们使用`.blob()`方法将响应转换为一个Blob对象，这是浏览器用于表示二进制数据的一种方式。我们使用`URL.createObjectURL()`方法创建一个指向这个Blob对象的URL，然后将这个URL设置为一个新创建的`<img>`元素的`src`属性，以便在页面上显示这个图像。 ######[AI写代码神器 | 477点数解答 | 2023-12-16 23:10:55]