解决跨域请求的问题（CORS）
- 游戏开发
- 2025-09-11 02:00:02
目录
解决跨域请求问题的方法
1. 服务器端配置响应头
2. JSONP（JSON with Padding）
3. 代理服务器
场景示例
前端代码（使用 Fetch API）
后端代码（使用 Node.js + Express 并设置 CORS 响应头）
跨域资源共享（CORS，Cross-Origin Resource Sharing）是一种现代浏览器为了安全而实施的同源策略所引发的问题。同源策略要求浏览器在访问不同源（协议、域名、端口三者任意一个不同即为不同源）的资源时进行限制。以下详细介绍解决跨域请求问题（CORS）的方法。
解决跨域请求问题的方法 1. 服务器端配置响应头这是解决 CORS 问题最常见和推荐的方法，通过在服务器端设置响应头来允许跨域请求。
原理：服务器通过设置特定的响应头，告诉浏览器哪些源可以访问该资源，以及允许的请求方法、请求头和是否允许携带凭证等信息。
示例代码（以 Node.js + Express 为例）：
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, PUT, DELETE'); // 允许的请求方法 res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization'); // 允许的请求头 next(); }); // 处理 GET 请求 app.get('/api/data', (req, res) => { res.json({ message: 'This is some data from the server.' }); }); const port = 3000; app.listen(port, () => { console.log(`Server is running on port ${port}`); });解释：
Access-Control-Allow-Origin：指定允许访问该资源的源。* 表示允许所有源访问，但在生产环境中，为了安全起见，建议指定具体的源。Access-Control-Allow-Methods：指定允许的请求方法。Access-Control-Allow-Headers：指定允许的请求头。 2. JSONP（JSON with Padding）JSONP 是一种古老的跨域数据交互技术，它利用了 <script> 标签的 src 属性不受同源策略限制的特点。
原理：服务器返回的数据被包裹在一个回调函数中，前端页面通过动态创建 <script> 标签来请求该数据，当请求完成后，会执行回调函数并将数据传递给它。
示例代码： 前端代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JSONP Example</title> </head> <body> <script> function handleData(data) { console.log(data); } const script = document.createElement('script'); script.src = 'http://example /api/data?callback=handleData'; document.body.appendChild(script); </script> </body> </html>服务器端代码（以 Node.js 为例）：
const http = require('http'); const server = http.createServer((req, res) => { const url = new URL(req.url, `http://${req.headers.host}`); const callback = url.searchParams.get('callback'); const data = { message: 'This is some data from the server.' }; const jsonp = `${callback}(${JSON.stringify(data)})`; res.writeHead(200, { 'Content-Type': 'application/javascript' }); res.end(jsonp); }); const port = 3000; server.listen(port, () => { console.log(`Server is running on port ${port}`); });局限性：JSONP 只支持 GET 请求，并且安全性较低，容易受到 XSS 攻击。
3. 代理服务器在开发环境中，可以使用代理服务器来解决跨域问题。代理服务器位于客户端和目标服务器之间，客户端向代理服务器发送请求，代理服务器再将请求转发到目标服务器，并将响应返回给客户端。
示例代码（以 Vue CLI 为例）： 在 vue.config.js 中配置代理：
module.exports = { devServer: { proxy: { '/api': { target: 'http://example ', // 目标服务器地址 changeOrigin: true, pathRewrite: { '^/api': '' } } } } };解释：
target：目标服务器的地址。changeOrigin：是否改变请求的源。pathRewrite：对请求路径进行重写。 场景示例假设你有一个前端项目运行在 http://localhost:8080，后端 API 服务运行在 http://localhost:3000，你想从前端项目中请求后端 API 的数据。
前端代码（使用 Fetch API） fetch('http://localhost:3000/api/data') .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error('Error:', error)); 后端代码（使用 Node.js + Express 并设置 CORS 响应头） const express = require('express'); const app = express(); app.use((req, res, next) => { res.setHeader('Access-Control-Allow-Origin', 'http://localhost:8080'); res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE'); res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization'); next(); }); app.get('/api/data', (req, res) => { res.json({ message: 'This is some data from the server.' }); }); const port = 3000; app.listen(port, () => { console.log(`Server is running on port ${port}`); });通过以上配置，前端项目就可以正常请求后端 API 的数据，解决了跨域问题。
解决跨域请求的问题（CORS）由讯客互联游戏开发栏目发布，感谢您对讯客互联的认可，以及对我们原创作品以及文章的青睐，非常欢迎各位朋友分享到个人网站或者朋友圈，但转载请说明文章出处“解决跨域请求的问题（CORS）”
![[GESP202312六级]工作沟通](/0pic/pp_73.jpg)
