Node.js -- 同源和跨域

最新推荐文章于 2024-09-25 09:53:04 发布
最新推荐文章于 2024-09-25 09:53:04 发布
阅读量201 收藏
点赞数 4
分类专栏： Node.js 文章标签： node.js jsonp 同源 ajax跨域问题 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_47109503/article/details/120105101
版权

欢迎学习交流！！！
持续更新中…

文章目录

同源政策

如果两个页面拥有相同的协议、域名和端口，那么这两个页面就属于同一个源，其中只要有一个不相同，就是不同源。

同源政策的目的：
同源政策是为了保护用户信息的安全，防止恶意的网站窃取数据。最初的同源政策是指A网站在客户端设置的Cookie，B网站是不能访问的
随着互联网的发展，同源政策也越来越严格，在不同源的情况下，其中有一项规定就是无法向非同源地址发送Ajax请求，如果请求，浏览器就会报错。

跨域问题

JSONP

使用JSONP解决同源限制问题，该方式实际上已经不属于ajax请求的范围，但是可以模拟出ajax的请求效果，该方式就是绕过浏览器的同源政策限制，向非同源服务器端发送请求。
jsonp是json with padding的缩写（实际上指在服务器端将json数据作为填充内容/函数的参数，将json数据填充到函数中去），它不属于Ajax请求，但它可以模拟Ajax请求

使用JSONP解决同源限制问题的基本步骤：

  1. 将不同源的服务器端请求地址写在script标签的src属性中（该标签的src属性不受同源政策的限制）
<script src="www.example.com"></script>
//请求地址可以是任意形式，不是必须以.js结尾的，但必须返回合法的js代码

可以利用script的src属性中可以写线上的jquery文件地址，为典型的向非同源的服务器端请求数据的案例。

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  1. 服务器端响应数据必须是一个函数的调用，真正要发送给客户端的数据需要作为函数调用的参数。在服务器端这段响应的代码必须是字符串，字符串中包括函数调用的代码。因为如果不是字符串，就是真正的函数调用，而这段函数调用就会在服务器端执行，就不会在客户端执行。需要注意的是，函数是在客户端被调用的，所以需要在定义之前在客户端准备好函数的定义，因为只有定义了这个函数，函数才能够被调用起来（第3步）。
const data = 'fn({name: "张三", age: "17"})';
res.send(data);
  1. 在客户端全局作用域下定义函数fn（必须写在script标签之上，这样才能在执行函数的时候找到函数定义），在定义过程中用的是形参，可以将形参和实参相对应
function fn (data) {  }
  1. 在fn函数内部对服务器端返回的数据进行处理
function fn (data) { console.log(data); }

例：
客户端：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 要在请求地址之前就将函数定义好 -->
<script>
    function fn() {
        console.log('客户端的fn函数被调用了')
    }
</script>
    <!-- 1. 将非同源服务器端的请求地址写在script标签的src属性中 -->
<script src="http://localhost:3001/test"></script>
</body>
</html>

在另外一个，3001服务器中的app.js文件：

<!-- 2号服务器的app.js -->
<script>
// 引入express框架
const express = require('express');
// 路径处理模块
const path = require('path');
// 创建网站服务器
const app = express();
app.use(express.static(path.join(__dirname, 'public')));

app.get('/test',(req, res) => {
    //函数调用应该在服务器端进行调用，只需要服务器端写出函数调用的字符串，若在此处直接调用，则前后没有函数定义的代码，就会报错
    const result = 'fn()'; 
    res.send(result)
})
</script>

JSONP优点：

  • 它不像XMLHttpRequest 对象实现 Ajax 请求那样受到同源策略的限制
  • 兼容性很好，在古老的浏览器也能很好的运行
  • 不需要 XMLHttpRequest 或 ActiveX 的支持；并且在请求完毕后可以通过调用 callback 的方式回传结果。
    JSONP缺点：
  • 它支持 GET 请求而不支持 POST 等其它类行的 HTTP 请求。
  • 它只支持跨域 HTTP 请求这种情况，不能解决不同域的两个页面或 iframe 之间进行数据通信的问题

JSONP代码优化

虽然现在请求能够被发送，也能够获取服务器端响应的数据，但是请求是在页面加载的过程中被发送的，即请求是在访问html页面的时候被立即发送的，而不是请求在想发送的时候立即发送的（如点击按钮时）。

  1. 客户端需要将函数名称传递到服务器端（服务器返回的函数名称必须和客户端定义的函数名称保持一致）
    实例：客户端定义的名字直接通过请求参数的方式传递到服务器端，服务器端接收到该函数的名字后直接返回函数的调用。因此客户端函数名字的修改将不会影响到服务器端
客户端：
<script>
	function fn2 (data) {
		console.log('客户端的fn函数被调用了')
		console.log(data);
	}
</script>
<!-- 将非同源服务器段的请求地址写在script标签的src属性中 -->
<script src="http://localhost:3001/better?callback=fn2"></script>

服务器端：2号服务器端 app.js文件
const express = require('express');
const path = require('path');
const app = express();
// 静态资源访问服务功能
app.use(express.static(path.join(__dirname,'public')));

app.get('/brtter', (req,res) => {
    //接收客户端传递过来的函数名称
    const fnName = req.query.callback;   
    // 将函数名称对应的函数调用代码返回给客户端
    const result = fnName + '({name: "张三"})';
    res.send(result);
})
// 监听端口
app.listen(3001);
// 控制台提示输出
console.log('服务器启动成功');
  1. 将script请求的发送变成动态请求
    <button id="btn">点我发送请求</button>
    <script>
        function fn2 (data) {
            console.log('客户端的fn函数被调用了')
            console.log(data);
        }
    </script>
    <!-- 将非同源服务器段的请求地址写在script标签的src属性中 -->
    <!-- <script src="http://localhost:3001/better?callback=fn2"></script> -->
    <script type="text/javascript">
        // 获取按钮
        var btn = document.getElementById('btn');
        // 为按钮添加点击事件
        btn.onclick = function () {
            // 动态创建script标签
            var script = document.createElement('script');
            // 为script标签添加设置src属性
            script.src = 'http://localhost:3001/better?callback=fn2';
            // 将srcipt标签追加到页面中
            document.body.appendChild(script);
            // 为script标签添加onload事件
            script.onload = function () {
                // 将body中的script标签删除掉
                document.body.removeChild(script);
            }
        }
    </script>
  1. 封装jsonp函数，方便请求发送。（代码重复多次使用，封装以后当想要使用jsonp方式向非同源服务器端发送请求时，只需要调用该函数即可）—和封装ajax函数思路一样
    基础地封装JONSP函数用于发送请求：
    <button id="btn">点我发送请求</button>
    <script>
        function fn2 (data) {
            console.log('客户端的fn函数被调用了');
            console.log(data);
        }
    </script>
<script type="text/javascript">
    // 获取按钮
    var btn = document.getElementById('btn');
    // 为按钮添加点击事件
    btn.onclick = function () {
        jsonp({   //当前对象为jsonp属性的实参，而在函数定义的时候有一个形参与之对应---options
        // 请求地址
        url: 'http://localhost:3001/better?callback=fn2'
        })
    }

    // 当想向非同源服务器发送请求时只需要调用jsonp函数即可
    function jsonp (options) {
        // 动态创建script标签
        var script = document.createElement('script');
        // 为script标签添加src属性   只有在发送请求，调用jsonp函数的时才会知道请求会发送到哪里去
        script.src = options.url;
        // 将script标签追加到页面中，这样请求才能发送出去
        document.body.appendChild(script);
        // 为script标签添加onload事件
        script.onload = function () {
            document.body.removeChild(script);
        }
    }
</script>

虽然已经封装jsonp函数用于发送请求，但在函数外部的其他地方还需要另外定义一个函数用于接收服务器端的返回数据：

    <button id="btn">点我发送请求</button>
    <script>
        function fn2 (data) {
            console.log('客户端的fn函数被调用了');
            console.log(data);
        }
    </script>
<script type="text/javascript">
    // 获取按钮
    var btn = document.getElementById('btn');
    // 为按钮添加点击事件
    btn.onclick = function () {
        jsonp({   //当前对象为jsonp属性的实参，而在函数定义的时候有一个形参与之对应---options
            // 请求地址
            url: 'http://localhost:3001/better',
            success: function (data) {
                console.log(777);
                console.log(data);
            }
        })
    }

    // 当想向非同源服务器发送请求时只需要调用jsonp函数即可
    function jsonp (options) {
        // 动态创建script标签
        var script = document.createElement('script');
        // rendom()产生0-9之间的随机小数-->需要去掉小数点     函数名：myJsonp0898789
        var fnName = 'myJsonp' + Math.rendom().toString().replace('.','')
        // 它已经不是一个全局函数，服务器在返回函数调用时找不到该函数
        // 因此要想办法将其变成一个全局函数（在JS中window代表全局）
        window[fnName] = options.success;   //函数名字不能固定，否则连续发送请求时会覆盖掉
        // 为script标签添加src属性   只有在发送请求，调用jsonp函数的时才会知道请求会发送到哪里去
        script.src = options.url + '?callback=' + fnName;
        // 将script标签追加到页面中，这样请求才能发送出去
        document.body.appendChild(script);
        // 为script标签添加onload事件
        script.onload = function () {
            document.body.removeChild(script);
        }
    }
</script>

完善：在发送请求时目前只是传递了一个callback参数，若该请求要求传递更多参数时，则就和ajax函数一样，在调用jsonp函数的时候传递一个data属性，属性的值为一个对象，对象中存储的就是想要向服务器端发送的请求参数，在jsonp函数内部，要讲对象转换为‘参数名称=参数值’，多个参数之间用‘&’隔开的字符串

    // 获取按钮
    var btn = document.getElementById('btn');
    // 为按钮添加点击事件
    btn.onclick = function () {
        jsonp({   //当前对象为jsonp属性的实参，而在函数定义的时候有一个形参与之对应---options
            // 请求地址
            url: 'http://localhost:3001/better',
            data: {
                name: '王五',
                age: 17
            },
            success: function (data) {
                console.log(777);
                console.log(data);
            }
        })
    }

    // 当想向非同源服务器发送请求时只需要调用jsonp函数即可
    function jsonp (options) {
        // 动态创建script标签
        var script = document.createElement('script');
        // 拼接字符串的变量
        var params = '';
        for (var attr in options.data) {
            params += '&' + attr + '=' + options.data[attr];
        }

        // rendom()产生0-9之间的随机小数-->需要去掉小数点     函数名：myJsonp0898789
        var fnName = 'myJsonp' + Math.rendom().toString().replace('.','')
        // 它已经不是一个全局函数，服务器在返回函数调用时找不到该函数
        // 因此要想办法将其变成一个全局函数（在JS中window代表全局）
        window[fnName] = options.success;   //函数名字不能固定，否则连续发送请求时会覆盖掉
        // 为script标签添加src属性   只有在发送请求，调用jsonp函数的时才会知道请求会发送到哪里去
        script.src = options.url + '?callback=' + fnName + params;
        // 将script标签追加到页面中，这样请求才能发送出去
        document.body.appendChild(script);
        // 为script标签添加onload事件
        script.onload = function () {
            document.body.removeChild(script);
        }
    }

CORS

CORS 是一个 W3C 标准，全称是"跨域资源共享"（Cross-origin resource sharing）它允许浏览器向跨源服务器，发出 XMLHttpRequest 请求，从而克服了 ajax 只能同源使用的限制。

CORS 需要浏览器和服务器同时支持才可以生效，对于开发者来说，CORS 通信与同源的 ajax 通信没有差别，代码完全一样。浏览器一旦发现 ajax 请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。

因此，实现 CORS 通信的关键是服务器。只要服务器实现了 CORS 接口，就可以跨源通信。

  • 首先前端先创建一个 index.html 页面：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CORS</title>
</head>
<body>
    <script>
	const xhr = new XMLHttpRequest();
	xhr.open('GET', 'http://127.0.0.1:3000', true);
	xhr.onreadystatechange = function() {
	    if(xhr.readyState === 4 && xhr.status === 200) {
	        alert(xhr.responseText);
	    }
	}
	xhr.send(null);
    </script>
</body>
</html>
  • 这似乎跟一次正常的异步 ajax 请求没有什么区别，关键是在服务端收到请求后的处理：
require('http').createServer((req, res) => {

    res.writeHead(200, {
	'Access-Control-Allow-Origin': 'http://localhost:8080'
    });
    res.end('这是你要的数据：1234567');

}).listen(3000, '127.0.0.1');

console.log('启动服务，监听 127.0.0.1:3000');
  • 关键是在于设置相应头中的 Access-Control-Allow-Origin，该值要与请求头中 Origin 一致才能生效，否则将跨域失败。
  • 成功的关键在于 Access-Control-Allow-Origin 是否包含请求页面的域名，如果不包含的话，浏览器将认为这是一次失败的异步请求，将会调用 xhr.onerror 中的函数。

CORS 的优点：

  • 使用简单方便，更为安全
  • 支持 POST 请求方式

CORS的缺点：

  • CORS 是一种新型的跨域问题的解决方案，存在兼容问题，仅支持 IE 10 以上
Sco_Jing1031
关注
专栏目录
nodeJS解决跨域（同源策略）的简单三种方法（jsonp,cors，服务器代理）
祭月M的博客
10-14 1200
产生跨域请求问题的原因 因为在浏览器中有一个同源策略，这是浏览器最基本的安全功能，但是只在浏览器中有，在服务器中没有这个问题。 同源就是指：协议，域名，端口号都相同，任意一个不满足，就触发了同源策略，我们把触发了同源策略的请求叫做跨域请求。 jsonp <script src="http://domain/api?name=xujie&pwd=123456&callback=jsonp""></script> <script> //函数名与地址的c
Node【二】跨域和同源，跨域常用的解决方法
小祥编程擅长前端
11-21 711
我们在使用node.js搭建服务器的时候，就避免不了前、后端的请求和访问，那么跨域和同源我们就必须要掌握。跨域与同源主要讲述了cors方法，其他方法没有过多的介绍，大家如有需要可另行查找。
nodejs+express跨域请求总结
yiqiebyjian的博客
04-10 1390
一，最重要的第一步。在express脚手架中下载cors。（yarn add  cors）二，在app.js文件中添加跨源条件var app = express();app.all('*', function(req, res, next) { res.header("Access-Control-Allow-Origin", "*"); res.header("Access-Control-...
NodeJS+ExpressJS解决跨域请求CORS
银狐的专栏
12-16 2万+
虽然前端有多种方式处理跨域,但是多而不精,缺点都比较明显.相对而言更好的方式是通过后端参与处理,这样做不仅适用性更强,同时前端只要发送正常的Ajax请求即可.这样的技术叫做CORS.    Cross-Origin Resource Sharing跨域资源共享,应该算是现在最为推荐的跨域处理方案.不仅适用于各种Method,而且更加方便和简单.当然了,这么吊的东西只有现代浏览器支持,IE8一下的老
nodejs express 允许跨域访问(Access-Control-Allow-Origin)
热门推荐
dreamer2020的专栏
06-09 4万+
前世今生 在WEB应用普及的今天，个人信息（账号、COOKIE等）广泛应用于网页。浏览器同源策略保证了WEB环境的安全性。同源策略是说，在a.com域名下通过ajax或者XmlHttpRequest等方式访问b.com的资源时，是不被允许的。 然而在很多时候，出于业务的的需要，我们经常有类似的跨域访问 的需求。浏览器有一些支持跨域访问的标签，例如script,img等。 有这样的需求，自然就
[Node.js] 模块化 -- 中间件和跨域
DeathDomain的博客
07-05 298
IP地址和域名     中间件 什么是中间件 是服务器开启之后和路由响应之前执行的一个函数 编写用于Express应用程序的中间件   中间件功能执行的任务 执行任何代码。 对请求和响应对象进行更改。 结束请求-响应周期。 调用堆栈中的下一个中间件   示例代码 如果当前的中间件功能没有结束请求响应周期，则必须调用next()将控制传递给下一个中间件函数。否则，请求将被搁置     跨域 跨域固定报错格式 只要是出现跨域问题，浏览器
【前端工程化-Node.js】Node.js介绍、模块化、模块导入导出语法、npm包管理、同源和跨域
weixin_47588164的博客
09-04 1524
模块化：可以把项目中的每个文件都看做是一个模块。模块之间彼此独立，使用特定语法进行导入导出模块化的好处提高代码复用性实现按需加载作用域独立CommonJS标准和ECMAScript标准是两种常见的模块导入导出的语法标准软件包：本质就是一个文件夹，内部封装了工具和方法供开发者使用。根目录中必须要有文件（记录软件包的名字，作者，入口文件，依赖包等信息）软件包的分类本地软件包：仅在当前项目内使用，封装属性和方法，存在于项目根目录下的中全局软件包。
05初识 Node.js-ev-api-server
03-09
Node.js作为一种流行的JavaScript运行时环境，非常适合用于构建高性能的API服务器。本章节将介绍如何使用Node.js及其生态系统来搭建一个简单的API服务器，包括项目初始化、配置跨域访问、表单数据解析、路由管理以及...
Node.js-SockJS-低延迟全双工跨域通道的浏览器服务器
08-10
**Node.js-SockJS：构建低延迟全双工跨域通信通道** 在现代Web开发中，实时通信成为了不可或缺的一部分，特别是在构建实时应用如聊天、协作工具或者股票交易系统时。Node.js作为一款高效的服务器端JavaScript运行...
Node.js-LiveNode.js超简单的前端跨域前后端分离解决方案
08-09
**Node.js-LiveNode.js：前端跨域与前后端分离的高效解决方案** 在现代Web开发中，前端和后端的分离已经成为常态，这使得开发流程更加高效和灵活。`LiveNode.js`是一个针对这种趋势而设计的轻量级Node.js服务，它专...
Node.js-webStorage封装库-支持cookie解决方案
08-09
Node.js作为一个服务器端运行时环境，使得JavaScript可以用于后端开发，而WebStorage（包括localStorage和sessionStorage）及cookie则是前端数据存储的主要手段。本文将深入探讨"Node.js-webStorage封装库-支持...
Node.js-http-proxy-middleware用于把请求代理转发到其他服务器的中间件
08-10
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境，它让开发者能够在服务器端使用 JavaScript 进行编程。在 Node.js 开发中，`http-proxy-middleware` 是一款非常实用的中间件，主要用于将 HTTP 请求代理...
node发送邮件：如何实现Node.js发信功能？
danplus的博客
09-19 467
从选择合适的Node发送邮件库，到配置环境、编写代码、测试功能，再到优化性能，每一步都是实现Node发送邮件功能的关键。AokSend，赋能Node.js高效发送邮件，API与SMTP接口无缝集成！
day01
最新发布
JiangMeiXue的博客
09-25 143
目录。
文件系统设计 - 开发文件系统 Store (上篇)
qq_44746132的博客
09-21 553
本章以一个基础的响应式Store类开始，对编辑器最核心的基础模块-文件系统管理进行开发设计，遵循面向接口编程的理念，设计文件系统的相关接口类型定义。
webview2加载本地页面
qq_25160759的博客
09-23 554
推荐使用这种方式，加载速度比WebResourceRequested快（实测的确是快点），但是需要支持：ICoreWebView2_3。个人测试加载html字符串，对于html中引入了css和js，加载不太友好。这种方式是通过截获网络请求，然后返回需要的数据。以达到成功请求的假象。
WebGL复杂几何体与模型加载
天涯学馆
09-23 373
在WebGL中，复杂几何体的创建通常涉及多个顶点和面片，而模型加载则涉及到导入外部文件格式，如OBJ、GLTF或FBX。在WebGL中，可以通过设置不同类型的灯光来改变3D场景的光照效果。在WebGL中，可以通过增加更多的灯光uniforms并在片段着色器中计算它们的组合效果来实现多光源。除了基本的漫射和镜面高光，还可以添加软边缘高光、环境光遮蔽（Ambient Occlusion）和全局光照等效果，以增强光照的真实感。GLTF是一种现代的3D模型格式，包含了模型的几何体、材质、纹理和动画。
Vue配置路由
卡布达的博客
09-20 393
每个路由对象都应该包含path（路由路径）和component（对应的组件）routes: [path:'/',path:'',},{},{}]},{})
HTML5与Node.js实现跨域AJAX数据获取
为解决跨域限制，Node.js服务器需在响应头中添加`Access-Control-Allow-Origin`字段，允许指定的域名进行请求。 首先，让我们详细讲解HTML5页面中的Ajax请求部分： ```html <!DOCTYPE html> <meta charset="UTF...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值