解决跨域问题的几种办法

NFOTH • 2025-01-27 13:34 • 编程

一、利用Jsonp

Jsonp是一种利用标签实现跨域传输数据的方法。在ajax跨域请求时，json数据通过回调函数的方式传递回来，从而实现跨域数据传输。

    
        function jsonp(url, callback){
            var script = document.createElement('script');
            script.src = url;
            document.head.appendChild(script);
            window.callback = function(data){
                callback(data);
                document.head.removeChild(script);
            };
        }
        
        jsonp('http://example.com/api/data?callback=callback', function(data){
            console.log(data);
        });

二、使用CORS（Cross-Origin Resource Sharing）

CORS是一种跨域资源共享的机制。通过在服务器端设置Access-Control-Allow-Origin响应头，来允许特定的源站点访问指定的资源。

    
        // nodejs express服务器设置CORS
        const express = require('express');
        const app = express();

        app.use(function(req,res,next){
            res.setHeader('Access-Control-Allow-Origin', 'http://example.com');
            res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
            res.setHeader('Access-Control-Allow-Methods', 'GET');
            next();
        });

        app.get('/api/data', function(req,res){
            res.json({data: 'hello'});
        });
 
        app.listen(3000);

三、使用nginx代理

通过在nginx服务器上配置反向代理服务器，来实现跨域请求。在nginx上添加一个location项，将请求转发到目标服务器，从而达到跨域效果。

    
        // nginx反向代理配置
        server {
            listen 80;
            server_name example.com;
            location /api {
                proxy_pass http://localhost:3000; // 目标服务器地址
                add_header Access-Control-Allow-Origin http://example.com; // 设置允许跨域的源站点
                add_header Access-Control-Allow-Headers Content-Type; // 设置允许跨域的请求头
                add_header Access-Control-Allow-Methods GET; // 设置允许跨域的请求方法
            }
        }

四、使用iframe

通过在页面上嵌入一个隐藏的iframe，来进行跨域数据交互。在iframe中加载目标页面，并将需要传递的数据作为url的参数传递过去。目标页面通过读取url参数，获取传递的数据。

    
        // 发送方页面
        

        var iframe = document.getElementById('iframe1');
        var data = {name: 'Tom', age: 18};
        iframe.src = 'http://example.com/receiver.html?' + encodeURIComponent(JSON.stringify(data));

        // 接收方页面
        var data = JSON.parse(decodeURIComponent(window.location.search.substring(1)));
        console.log(data);

五、使用WebSocket

WebSocket是一种全双工通信协议，能够在不同的域名之间进行数据传输。通过在服务器上部署WebSocket服务端，来实现跨域数据交互。

    
        // 前端WebSocket客户端
        var socket = new WebSocket('ws://example.com');
        socket.onopen = function(){
            socket.send('Hello WebSocket!');
        };
        socket.onmessage = function(event){
            console.log(event.data);
        };

        // 后端WebSocket服务端
        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('received');
            });
        });

原创文章，作者：NFOTH，如若转载，请注明出处：https://www.506064.com/n/333193.html