nodejs+mongodb笔记------第八章（跨域）

跨域问题

跨域问题总结

1.为什么会有跨域这个问题？

原因是浏览器为了安全，而采用的同源策略（Same origin policy）

2.什么是同源策略？

1. 同源策略是由Netscape提出的一个著名的安全策略，现在所有支持JavaScript 的浏览器都会使用这个策略。
2. Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。
3. 所谓同源是指：协议，域名（IP），端口必须要完全相同
   即：协议、域名（IP）、端口都相同，才能算是在同一个域里。

备注：规则举例如下(假设已有网站地址为：http://study.cn)

image

3.没有同源策略的危险场景：

危险场景：

有一天你刚睡醒，收到一封邮件，说是你的银行账号有风险，赶紧点进www.yinghang.com改密码。你着急的赶紧点进去，还是熟悉的银行登录界面，你果断输入你的账号密码，登录进去看看钱有没有少了，睡眼朦胧的你没看清楚，平时访问的银行网站是www.yinhang.com，而现在访问的是www.yinghang.com，随后你来了一条短信，钱没了，这个钓鱼网站做了什么呢？大概是如下思路：

3.非同源受到哪些限制？

1. Cookie不能读取；
2. DOM无法获得；
3. Ajax请求不能发送

4.如何在开发中解决跨域问题：

1.JSONP解决发送请求跨域问题：

要明确的是：JSONP不是一种技术，而是程序员“智慧的结晶”（利用了标签请求资源不受同源策略限制的特点）
JSONP需要前后端人员互相配合。

前端页面写法：

    
      按钮
      
    

后端写法：

app.get('/jsonp', (req, res) => {
  //解构赋值获取请求参数
  const {callback} = req.query
  //去数据库查找对应数据
  const data = [{name: 'tom', age: 18}, {name: 'jerry', age: 20}];
  res.send(callback + '(' + JSON.stringify(data) + ')');
})

2.后台配置cors解决跨域

以Node为例：
res.set('Access-Control-Allow-Origin', 'http://localhost:63342');

3.使用代理服务器

例如：nginx等

jsonp解决跨域

index.html

  
  


点我获取数据

server.js

//引入express框架
let express = require('express')
//创建app应用对象
let app = express()
//暴露静态资源
app.use(express.static('public'))
//引入服务器内部具体实现
app.disable('x-powered-by')
//用于解析post请求的请求体参数
app.use(express.urlencoded({extended:true}))

app.get('/test_get',(request,response)=>{
  console.log(request.query)
  let {callback} = request.query
  let arr = [{name:'kobe',age:18},{name:'wade',age:20}]
  response.send(`${callback}(${JSON.stringify(arr)})`)
})

app.listen(3000,(err)=>{
  if(!err) console.log('该服务器用于测试jsonp解决跨域问题，必须通过webstorm打开网页')
  else console.log(err)
})