前后端分离开发中处理跨域问题汇总

一、通过CROS跨域

客户端不需要处理,只是服务器端需要添加一个头部

  • 1、服务器端设置Access-Control-Allow-Origin

    res.set('Access-Control-Allow-Origin', 'http://localhost:3000');
  • 2、详细代码见01(01-CORS)

二、使用JSONP处理跨域的问题

jsonp实质就是利用回调函数的处理方式,需要服务端配合开发

  • 代码见(02-jsonp)

三、使用iframe实现跨域

四、使用http-proxy-middleware中间件代理

  • 1、利用node定义服务层

    var express = require('express');
    var app = express();
    var responsePort = 3001; // 请求页面跑在3001端口
    // 定义一个返回数据的
    app.get('/api', (req, res) => {
        res.json({
            'info': 'success',
            'code': 200,
            'data': {
                'names': ['张三', '李四', '王五']
            }
        })
    });
    app.listen(responsePort, function() {
        console.log('Responser is listening on port ' + responsePort);
    });
  • 2、定义中间件代理到服务层数据

    var express = require('express');
    var proxy = require('http-proxy-middleware');
    
    var requestPort = 3000; // 请求页面跑在3000端口   
    var app = express();
    
    app.use(express.static(__dirname));
    
    // 请求这个'api'接口就会代代理到`http://localhost:3001/`服务下
    app.use('/api', proxy({ target: 'http://localhost:3001/', changeOrigin: true }));
    // changeOrigin设置为true,本地会虚拟一个服务端接收你的请求并代你发送该请求  
    // http://localhost:3000/api   -->   http://localhost:3001/api
    
    app.listen(requestPort, function() {
        console.log('Requester is listening on port ' + requestPort);
    });
  • 3、前端页面

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>Proxy跨域</title>
    </head>
    
    <body>
        <h2 style="text-align: center;">通过http-proxy-middleware插件设置代理</h2>
        <button>点击跨域</button>
        <p>hello world!</p>
    
        <script>
            var btn = document.getElementsByTagName('button')[0];
            var text = document.getElementsByTagName('p')[0];
            btn.addEventListener('click', function() {
                var xhr = new XMLHttpRequest();
                var url = '/api'; // 向http://localhost:3000/api发出请求,获取数据
                xhr.open('GET', url);
                xhr.send(null);
                xhr.onreadystatechange = () => {
                    if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) { // 如果请求成功
                        //text.innerHTML = xhr.response;
                        console.log(xhr.response)
                    }
                }
            })
        </script>
    </body>
    
    </html>
  • 4、代码见07

五、直接使用node模块,代码见08

六、使用WebSocket跨域

七、代码见demo

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

水痕01

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值