浏览器的跨域问题与解决方案_浏览器跨域-CSDN博客

本文为高热度网（http://blog.gaoredu.com/）原创文章，未经博主允许不得转载。更多原创内容请访问http://blog.gaoredu.com/

本文链接：https://blog.csdn.net/m0_37981569/article/details/144486342

浏览器的跨域问题与解决方案

浏览器的跨域问题源于同源策略（Same-Origin Policy）这一安全机制。同源策略要求两个页面具有相同的协议、域名和端口号，才能相互访问资源和数据。这一机制旨在防止恶意网站执行跨站脚本攻击，从而保护用户的隐私和数据安全。然而，在实际应用中，有时需要跨域访问资源，这就产生了跨域问题。

跨域问题的本质

跨域问题的核心是请求不同源。当浏览器尝试访问不同源的资源时，会触发同源策略的限制，导致请求被拦截或数据无法正确返回。例如，如果一个网页试图通过Ajax请求访问另一个域名的数据，而这两个域名不同源，那么请求将被浏览器阻止。

常见的跨域解决方案

JSONP（JSON with Padding）

JSONP是一种较早且兼容性较好的跨域解决方案。其原理是利用<script>标签的src属性可以跨域加载资源的特点，通过动态创建<script>标签，并向服务器传递一个回调函数名，服务器在返回数据时，将这个回调函数名作为函数调用的前缀，从而实现跨域通信。但JSONP只支持GET请求，不支持POST等其他类型的请求。

CORS（Cross-Origin Resource Sharing）

CORS是一个W3C标准，全称是“跨域资源共享”。它允许浏览器向跨源服务器发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。CORS需要浏览器和服务器同时支持。服务器通过配置响应头中的Access-Control-Allow-Origin等字段，来允许或拒绝特定源的跨域请求。CORS是目前比较常用的跨域解决方案。

代理服务器

代理服务器是解决跨域问题的另一种有效方法。通过在本地或服务器上设置一个代理，前端请求先发送到代理服务器，再由代理服务器转发到目标服务器，最后返回数据给前端。由于代理服务器与目标服务器之间的交互没有跨域问题，因此可以实现跨域请求。常见的代理服务器方案包括Node.js代理、Nginx代理等。

document.domain + iframe

这种方法适用于主域相同、子域不同的跨域应用场景。通过在两个页面上都设置document.domain为相同的基础主域，就可以实现同域访问。然后，可以利用<iframe>标签在不同页面之间进行通信。但这种方法有安全风险，如果一个子域名被攻击，多个被降域的域名都可能被连带影响。

location.hash + iframe

这种方法利用<iframe>的location.hash属性在不同域之间传值。由于location.hash的改变不会刷新页面，因此可以作为一种轻量级的跨域通信方式。但这种方法只能实现单向通信，且通信效率较低。

window.postMessage

HTML5引入了window.postMessage方法，用于实现跨文档消息传输。通过调用这个方法，可以向另一个窗口（包括<iframe>、window.open打开的窗口等）发送消息。接收方通过监听message事件来接收消息。这种方法可以实现跨域通信，但需要确保消息来源的安全性。

代码示例

1. CORS（跨域资源共享）

服务器端（Node.js + Express）设置CORS

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

// 允许所有来源的跨域请求（出于安全考虑，通常应限制允许的来源）
app.use(cors({
  origin: '*',
  methods: 'GET,HEAD,PUT,PATCH,POST,DELETE',
  credentials: true, // 如果需要发送Cookie，请设置为true
}));

app.get('/data', (req, res) => {
  res.json({ message: 'This is CORS-enabled for all origins!' });
});

app.listen(3000, () => {
  console.log('CORS-enabled web server listening on port 3000');
});

客户端（JavaScript）

fetch('http://localhost:3000/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

2. JSONP

服务器端（Node.js + Express）

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

app.get('/jsonp', (req, res) => {
  const callback = req.query.callback;
  res.jsonp({ message: 'This is a JSONP response!' }, { callback });
});

app.listen(3000, () => {
  console.log('JSONP-enabled web server listening on port 3000');
});

客户端（HTML + JavaScript）

<!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 handleResponse(data) {
      console.log(data.message);
    }

    const script = document.createElement('script');
    script.src = 'http://localhost:3000/jsonp?callback=handleResponse';
    document.body.appendChild(script);
  </script>
</body>
</html>

3. 代理服务器（使用Node.js作为代理）

代理服务器（Node.js + http-proxy-middleware）

const express = require('express');
const { createProxyMiddleware } = require('http-proxy-middleware');
const app = express();

const target = 'http://example.com'; // 目标服务器URL

app.use('/proxy', createProxyMiddleware({
  target: target,
  changeOrigin: true, // 如果目标服务器是HTTPS，需要设置为true
  pathRewrite: { '^/proxy': '' }, // 重写路径，去掉'/proxy'前缀
}));

app.listen(3000, () => {
  console.log('Proxy server listening on port 3000');
});

客户端（JavaScript）

fetch('http://localhost:3000/proxy/some/path')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));