解决跨域问题的几种方法

风筝@

于 2023-10-16 17:03:33 发布

阅读量53

点赞数 1

文章标签：前端 ajax javascript xss

本文链接：https://blog.csdn.net/m0_69977307/article/details/133862359

版权

JSONP（JSON with Padding）

JSONP是一种利用<script>标签来实现跨域数据传输的方法。通过在请求URL中添加一个回调函数名的参数，服务器将返回一个包裹在该回调函数中的JSON数据，从而实现跨域数据的获取。

示例代码：

// 客户端代码
function getData(data) {
  console.log(data);
}

var script = document.createElement('script');
script.src = 'http://api.example.com/data?callback=getData';
document.body.appendChild(script);

// 服务器代码（返回数据形式）
var data = {
  name: 'John',
  age: 25
};
var jsonData = JSON.stringify(data);
var callback = req.query.callback;
res.send(callback + '(' + jsonData + ')');

CORS跨域资源共享（Cross-Origin Resource Sharing）

CORS是一种更为官方、标准化的方法，允许服务器在响应中设置一些头部信息，告知浏览器是否可以跨域获取资源。如果服务器支持CORS，并设置了正确的响应头，那么浏览器将允许跨域的请求。

示例代码：

// 客户端代码
fetch('http://api.example.com/data', {
  method: 'GET',
  mode: 'cors', // 关键
  headers: {
    'Content-Type': 'application/json'
  }
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.log(error));

// 服务器代码（设置响应头）
app.use(function(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');
  next();
});

app.get('/data', function(req, res) {
  var data = {
    name: 'John',
    age: 25
  };
  res.json(data);
});

代理服务器

通过配置一个代理服务器，将跨域请求转发到同一域的服务器上进行处理，然后将结果返回给客户端。这种方法需要在后端进行配置，适用于复杂的跨域场景。

示例代码：

// 客户端代码，通过代理服务器发送请求
fetch('/api/data', {
  method: 'GET',
  headers: {
    'Content-Type': 'application/json'
  }
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.log(error));

// 代理服务器代码，将跨域请求转发到同一域的服务器
app.get('/api/data', function(req, res) {
  var targetUrl = 'http://api.example.com/data';
  // 在这里使用类似request库的方法将请求转发到targetUrl
  // 并将targetUrl的响应返回给客户端
});

代理服务器（反向代理）

反向代理是一种将请求从客户端转发到目标服务器的服务器。客户端发送请求到反向代理服务器，然后反向代理服务器将请求转发到目标服务器，再将目标服务器的响应返回给客户端。这样，由于客户端与反向代理服务器是同源的，就不存在跨域问题。

示例代码：

// 客户端代码，通过反向代理发送请求
fetch('/api/data', {
  method: 'GET',
  headers: {
    'Content-Type': 'application/json'
  }
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.log(error));

// 反向代理服务器配置，使用Nginx作为反向代理服务器
location /api/ {
  proxy_pass http://api.example.com/;
}

WebSocket

WebSocket是一种全双工通信协议，它可以在浏览器与服务器之间建立持久化的连接。由于WebSocket是基于可信任的HTTP连接建立的，所以可以使用WebSocket进行跨域通信。

示例代码：

// 客户端代码
var socket = new WebSocket('ws://api.example.com/');
socket.onopen = function() {
  console.log('WebSocket连接已建立');
};
socket.onmessage = function(event) {
  console.log('接收到消息:', event.data);
};
socket.onerror = function(error) {
  console.log('WebSocket错误:', error);
};
socket.onclose = function() {
  console.log('WebSocket连接已关闭');
};

// 服务器代码（WebSocket服务端）
var WebSocketServer = require('ws').Server;
var wss = new WebSocketServer({ port: 8080 });
wss.on('connection', function(socket) {
  console.log('WebSocket连接已建立');
  socket.on('message', function(message) {
    console.log('接收到消息:', message);
  });
  socket.on('close', function() {
    console.log('WebSocket连接已关闭');
  });
});

HTML5的 postMessage() 方法

HTML5引入了 postMessage() 方法，它允许在不同窗口（包括不同域的窗口）之间进行安全的跨域通信。通过在源窗口中调用 postMessage() 方法发送消息，并在目标窗口中监听 message 事件进行接收和处理。

示例代码：
在源窗口（http://www.example.com）中：
```
var targetWindow = document.getElementById('targetWindow').contentWindow;
targetWindow.postMessage('Hello', 'http://www.target.com');
```
在目标窗口（http://www.target.com）中：
```
window.addEventListener('message', function(event) {
  if (event.origin !== 'http://www.example.com') return;
  console.log(event.data);  // 输出 'Hello'
});
```
修改服务器响应头（Access-Control-Allow-Origin）
通过在服务器中设置响应头的 Access-Control-Allow-Origin 字段，可以允许特定源（如客户端所在的域）跨域访问资源。设置该字段为允许访问的域名或通配符 *，即可解决跨域访问的问题。

示例代码：
```
// 服务器代码
app.use(function(req, res, next) {
  res.setHeader('Access-Control-Allow-Origin', 'http://www.example.com');
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
  next();
});

app.get('/data', function(req, res) {
  var data = {
    name: 'John',
    age: 25
  };
  res.json(data);
});
```
在上述例子中, Access-Control-Allow-Origin 头被设置为 http://www.example.com，表示只允许 http://www.example.com 域的网页进行跨域访问。如果要允许所有域进行访问，可以将该头的值设置为 *。