ajax如何跨域请求数据库

Ajax跨域请求数据库的方法

一、CORS（跨域资源共享）

1、原理：CORS是一种机制，它使用额外的HTTP头来告诉浏览器让运行在一个origin（域）的Web应用被准许访问来自不同源服务器上的资源，CORS是实现跨域请求最常见的方法之一，且在现代浏览器中得到了广泛支持。

2、实现步骤

服务器端设置：服务器需要在响应头中添加Access-Control-Allow-Origin字段，并将其值设置为允许访问该资源的域名，如果允许所有域名访问，可以设置为；如果只允许特定域名访问，则设置为该域名，还可以根据需要设置其他CORS相关的响应头，如Access-Control-Allow-Methods（允许的HTTP方法）、Access-Control-Allow-Headers（允许的HTTP头）等。

客户端设置：对于大多数现代浏览器来说，只要服务器端设置了正确的CORS响应头，客户端的Ajax请求就可以像同源请求一样发送，无需额外设置，但在某些情况下，可能需要在客户端代码中处理一些CORS相关的问题，如跨域请求失败时的错误处理。

3、示例代码

服务器端（以Node.js为例）

 const express = require('express');
     const app = express();
     app.use((req, res, next) => {
       res.header("Access-Control-Allow-Origin", "");
       res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
       next();
     });
     app.get('/data', (req, res) => {
       res.json({ message: 'Hello World' });
     });
     app.listen(3000, () => {
       console.log('Server is running on port 3000');
     });

客户端

 var xhr = new XMLHttpRequest();
     xhr.open('GET', 'http://example.com/data', true);
     xhr.onreadystatechange = function () {
       if (xhr.readyState == 4 && xhr.status == 200) {
         console.log(xhr.responseText);
       }
     };
     xhr.send();

二、JSONP（JSON with Padding）

1、原理：JSONP通过动态插入<script>标签的方式，绕过同源策略限制，实现跨域请求，它利用了浏览器对<script>标签不限制跨域的特性，通过服务器端返回一个JavaScript函数调用，并将数据作为参数传递给该函数，在客户端，编写一个回调函数来处理返回的数据。

2、实现步骤

服务器端设置：服务器需要将返回的数据包装在一个指定的回调函数中，并确保返回的内容类型为text/javascript或application/javascript，如果客户端指定的回调函数名为callback，服务器返回的内容应类似于callback({"key": "value"})。

客户端设置：在客户端代码中，创建一个唯一的回调函数名，并通过查询字符串参数将其传递给服务器，动态创建一个<script>标签，并将其src属性设置为带有回调函数名的跨域API的URL，定义回调函数来处理服务器返回的数据。

3、示例代码

服务器端（以Node.js为例）

 const express = require('express');
     const app = express();
     app.get('/data', (req, res) => {
       const callback = req.query.callback;
       const data = { message: 'Hello World' };
       res.type('application/javascript');
       res.send(${callback}(${JSON.stringify(data)}));
     });
     app.listen(3000, () => {
       console.log('Server is running on port 3000');
     });

客户端

 function handleData(data) {
       console.log(data.message);
     }
     const script = document.createElement('script');
     script.src = 'http://example.com/data?callback=handleData';
     document.body.appendChild(script);

三、代理服务器

1、原理：代理服务器充当中间人的角色，接收来自客户端的请求，并将其转发到目标服务器，目标服务器返回的响应再经过代理服务器返回给客户端，由于代理服务器和客户端处于同一域下，因此可以绕过浏览器的同源策略限制。

2、实现步骤

搭建代理服务器：可以使用各种编程语言和框架搭建代理服务器，如Node.js、Python、Java等，代理服务器需要监听客户端的请求，解析请求参数，并将其转发到目标服务器，代理服务器还需要接收目标服务器的响应，并将其返回给客户端。

配置客户端请求：在客户端代码中，将原本指向目标服务器的Ajax请求URL修改为指向代理服务器的URL，这样，客户端的请求就会先发送到代理服务器，由代理服务器再转发到目标服务器。

3、示例代码

代理服务器（以Node.js为例）

 const express = require('express');
     const request = require('request');
     const app = express();
     app.all('/', (req, res) => {
       req.pipe(request(req.url.slice(7))).pipe(res);
     });
     app.listen(3000, () => {
       console.log('Proxy server is running on port 3000');
     });

客户端

 var xhr = new XMLHttpRequest();
     xhr.open('GET', '/proxy/http://example.com/data', true);
     xhr.onreadystatechange = function () {
       if (xhr.readyState == 4 && xhr.status == 200) {
         console.log(xhr.responseText);
       }
     };
     xhr.send();

四、WebSockets

1、原理：WebSocket是一种基于TCP协议的全双工通信协议，可以在浏览器和服务器之间建立持久性的连接，实现实时通信，通过WebSocket连接，客户端和服务器可以直接进行数据的发送和接收，不受同源策略的限制。

2、实现步骤

建立WebSocket连接：在客户端代码中，使用WebSocket API创建与服务器的连接。new WebSocket('ws://example.com/socket')，连接建立后，可以通过send方法向服务器发送数据，通过onmessage事件监听服务器返回的数据。

服务器端处理：服务器端需要使用支持WebSocket的库或框架来处理客户端的连接请求和数据传输，当服务器接收到客户端发送的消息时，可以进行相应的处理，并将结果返回给客户端。

3、示例代码

服务器端（以Node.js为例）

 const WebSocket = require('ws');
     const wss = new WebSocket.Server({ port: 8080 });
     wss.on('connection', function connection(ws) {
       ws.on('message', function incoming(message) {
         console.log('received: %s', message);
         ws.send('Hello World');
       });
     });

客户端

 var socket = new WebSocket('ws://localhost:8080/');
     socket.onopen = function(event) {
       socket.send('Hello Server!');
     };
     socket.onmessage = function(event) {
       console.log('Message from server ', event.data);
     };