Node【二】跨域和同源,跨域常用的解决方法

Node【二】跨域和同源


文章目录

  • Node【二】跨域和同源
  • 前言
  • 一、跨域、同源是什么?
    • 1、同源
    • 2、跨域
  • 二、跨域的解决方法。
    • 2.1、CORS
      • 2.1.1、在原生的node中使用cors
      • 2.1.2、在express中使用cros
    • 2.2、JSONP
  • 总结


前言

我们在使用node.js搭建服务器的时候,就避免不了前、后端的请求和访问,那么跨域和同源我们就必须要掌握。


一、跨域、同源是什么?

1、同源

同源:是游览器最基本也是最核心的安全功能,必须协议名、域名、端口号,是一样的,目的是为了保护用户数据,防止恶意网站窃取数据。(其中域名包括主域名和子域名)

2、跨域

同源指的是两个URL的协议、域名、端口号一致,反之就是跨域。
由于同源策略的限制,会阻止一个域的js脚本和另一个域的内容进行交互,所以有了跨域,当请求的URL的协议或者域名或者端口与当前的页面不一样就产生了跨域。

二、跨域的解决方法。

跨域的解决方法有五种:JSONP、CORS、降域、postMessage。

2.1、CORS

优点:

1.服务器返回响应头,前端无需任何处理。
2. 简单快捷,支持所有请求方式。

2.1.1、在原生的node中使用cors

CORS :全称cross origin resource share (资源共享)
工作原理:服务器在返回响应报文的时候,在响应头中设置一个允许的header

res.setHeader('Access-Control-Allow-Origin', '*')

*代表允许所有的请求,也可以设置单一URL,只允许单一URL访问。

2.1.2、在express中使用cros

官网传送门:https://www.expressjs.com.cn/resources/middleware.html
Express是一个第三方模块,用于快速搭建服务器。
第一步:下载第三方模块cros

npm install cors

第二步:配置

let cors = require('cors')
app.use(cors())

cors原理:

app.use((req,res,next)=>{
	res.setHeader('Access-Control-Allow-Origin','*')
	next()		//执行下一个
})

2.2、JSONP

通过动态创建script标签的src,向一个不同源的的接口发送一个get请求。
JSONP核心原理:如果script标签的src属性的请求,服务器返回的是一个函数调用,则游览器会执行这个函数。
注意:JSONP只支持get请求,不支持post

Node【二】跨域和同源,跨域常用的解决方法_第1张图片


总结

跨域与同源主要讲述了cors方法,其他方法没有过多的介绍,大家如有需要可另行查找。

你可能感兴趣的:(Node,前端,javascript,开发语言)