【跨域】跨域的简易实现和测试

最新推荐文章于 2024-08-08 10:08:22 发布

weixin_34064653

最新推荐文章于 2024-08-08 10:08:22 发布

阅读量769

点赞数

文章标签： c# json 前端 ViewUI

原文链接：https://segmentfault.com/a/1190000011162411

版权

本文介绍了跨域的多种实现方式，包括JSONP的原理和案例、CORS配置、ServerProxy服务器代理、postMessage通信及webSocket全双工通信协议。通过示例代码展示了如何在前端和后端实现跨域请求，特别强调了安全性及其应用场景。

摘要由CSDN通过智能技术生成

前言

由于自己平时只做做demo，并没有遇到太多跨域问题，今天通过几个样例模拟实现了几种跨域方式。原文地址传送门

本文所有样例静态服务器基于nodejs实现，代码亲测可用。测试步骤如下：

1.为了实现跨域访问的效果，需要下载http-server 作为一个服务器 npm install http-server。用来挂载静态页面 index.html 。（访问http://127.0.0.1:8080 显示index.html页面）
2.运行node创建的静态服务器node server (node搭建静态服务向下翻)

JSONP跨域

JSONP实现跨域原理

说道跨域可能最先想到就时 jsonp ,实现原理为：同源策略只限制浏览器的行为而不限制js，所以可以将请求写到 script 标签中。关键代码如下：

<script>
    function jsonpCallback(args){...}
</script>
<script src='http://127.0.0.1:3000?callback=jsonpCallback'></script>

前端发出跨域请求数据后，服务端去解析该请求：

const data={...}
const callback = req.parse(req.url,true).query.callback
res.writeHead(200)

//最关键的一步，拼接回调函数和作为函数参数的数据data
res.end(`${callback}(${JSON.stringfy(data)})`)

浏览器接收到服务端返回的响应，由于发起请求的是script，相当于直接调用方法并传入参数

具体实现案例

（服务端代码，node.js）

const url = require('url');

require('http').createServer((req, res) => {
    const data = {
        x: 10
    };
    const callback = url.parse(req.url, true).query.callback
    res.writeHead(200);
    //回调原页面上函