node.js ajax数据请求跨域问题 您所在的位置:网站首页 nodejs跨域问题 node.js ajax数据请求跨域问题

node.js ajax数据请求跨域问题

2024-02-22 13:07| 来源: 网络整理| 查看: 265

最近想用node作为后台抛出接口,前端页面去请求接口的时候报错了,发现是跨域的问题。为什么会出现跨域问题呢?我们就需要了解什么是浏览器的同源策略。 什么是浏览器的同源策略,为什么要同源策略

同源策略简单来说就是三同,同协议、同域名、同端口。个域内的脚本仅仅具有本域内的权限,可以理解为本域脚本只能读写本域内的资源,而无法访问其它域的资源。这种安全限制称为同源策略,有同源策略的原因就在于为了提升浏览器的安全性,但是,我们都知道安全性和方便性是成反比的,有了高的安全性必定给我们的操作带来低效,牺牲了Web拓展上的灵活性,现代浏览器在安全性和可用性之间选择了一个平衡点。在遵循同源策略的基础上,选择性地为同源策略“开放了后门”。例如img、script 、style等标签,都允许垮域引用资源,严格说这都是不符合同源要求的。

JavaScript这个安全策略在进行多iframe或多窗口编程、以及Ajax编程时显得尤为重要。根据这个策略,在souhu.com下的页面中包含的JavaScript代码,不能访问在google.com域名下的页面内容;甚至不同的子域名之间的页面也不能通过JavaScript代码互相访问。对于Ajax的影响在于,通过XMLHttpRequest实现的Ajax请求,不能向不同的域提交请求,例如,在you.example.com下的页面,不能向me.example.com提交Ajax请求,等等。

举例说明 URL说明是否允许通信http://www.baidu.com/a.js http://www.baidu.com/b.js同一域名允许http://www.baidu.com/map/a.js http://www.baidu.com/tieba/b.js同一域名不同文件夹下允许http://www.baidu.com:8000/a.js http://www.baidu.com/b.js同一域名不同端口不允许http://www.baidu.com/a.js https://www.baidu.com/b.js同一域名不同协议不允许http://www.baidu.com/a.js http://75.32.68.45/b.js域名和域名对应ip不允许http://www.baidu.com/a.js http://query.baidu.com/b.js主域相同,子域不同不允许http://www.baidu.com/a.js http://www.google.com/b.js不同域名不允许 为什么浏览器要实现同源限制?我们举例说明:

比如一个黑客,他利用iframe把真正的银行登录页面嵌到他的页面上,当你使用真实的用户名和密码登录时,如果没有同源限制,他的页面就可以通过javascript读取到你的表单中输入的内容,这样用户名和密码就轻松到手了。又比如你登录了淘宝,同时浏览了恶意网站,如果没有同源限制,该恶意 网站就可以构造AJAX请求频繁在淘宝发广告帖.

这是前端页面显示的错误 //前端页面报错内容 Failed to load http://localhost:3000/users/login: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access. //服务端错误方法 // node登录接口,文件地址routes/users.js router.post('/login',function (req, res, next) { // 打印post请求的数据内容 console.log(req.body); console.log(req.body.username); console.log(req.body.password); if (req.body.username == "shuah" && req.body.password == "123456") { res.end(JSON.stringify(dataSuccess)); } else { res.end(JSON.stringify(dataError)); } }); //前端数据请求 //引用jquery.js var data ={ username:'shuah', password:'123456' } $.ajax({ url: "http://localhost:3000/users/login", type: "POST", headers:{ "Conten-Type":"http://localhost:3000/users/login" }, data: JSON.stringify(data), dataType:"json", success: function(data){ console.info("success."); console.log(data) } }) 总结了两个解决node跨域的方法。 简单粗暴,但是任何页面都可以请求,不安全。 //在每个方法的头部加入 res.header("Access-Control-Allow-Origin", "*"); res.header("Access-Control-Allow-Headers", "X-Requested-With"); res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS"); res.header("X-Powered-By",' 3.2.1'); res.header("Content-Type", "application/json;charset=utf-8"); // login 方法修改为 router.post('/login',function (req, res, next) { res.header("Access-Control-Allow-Origin", "*"); res.header("Access-Control-Allow-Headers", "X-Requested-With"); res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS"); res.header("X-Powered-By",' 3.2.1'); res.header("Content-Type", "application/json;charset=utf-8"); // 打印post请求的数据内容 console.log(req.body); console.log(req.body.username); console.log(req.body.password); if (req.body.username == "shuah" && req.body.password == "123456") { res.end(JSON.stringify(dataSuccess)); } else { res.end(JSON.stringify(dataError)); } }); //前端页面 $.ajax({ url: "http://localhost:3000/users/login", type: "POST", data:data, dataType:"json", success: function(data){ console.info("success."); console.log(data) } })

2.引入 cors 安全,自定义

npm install cors

cors的githbu地址,里面有更加多的方法 https://github.com/expressjs/cors

//相对与上一个方法,这个不用每个方法都添加请求头 //在app.js里面修改 var cors = require('cors') app.use(cors()) //自定义设置 //在app.js里面修改,只有http://localhost可以访问请求,其他都为跨域,安全,需要启动一个本地服务 var cors = require('cors') app.use(cors({ origin:['http://localhost'], methods:['GET','POST'], alloweHeaders:['Conten-Type', 'Authorization'] })); //前端页面 $.ajax({ url: "http://localhost:3000/users/login", type: "POST", data:data, dataType:"json", success: function(data){ console.info("success."); console.log(data) } })


【本文地址】

公司简介

联系我们

今日新闻

    推荐新闻

    专题文章
      CopyRight 2018-2019 实验室设备网 版权所有