浏览器同源策略

浏览器同源策略

同源策略：是一个重要的浏览器的安全策略，用于限制一个源的文档或者它加载的脚本如何能与另一个源的资源进行交互

它能帮助阻隔恶意文档，减少可能被攻击的媒介

例如：被钓鱼网站收集信息，使用ajax发起恶意请求，传递转账信息给银行服务器

源

web内部的源 由 用于访问它的协议 域名 端口 组成，只有当协议 域名 端口都匹配时，两个对象才有相同的源

同源

网页加载时所在的源，和Ajax请求时的源 协议 域名 端口 全部相同即为同源

跨域

跨域: 从一个源的文档，加载另一个源的资源就产生了跨域

案例：网页所在源 和Ajax访问的源(协议，域名，端口) 有一个不同， 就发生了跨域访问，请求响应是失败的

	<script>// 请求本机web服务提供的省份列表数据// http://127.0.0.1:5500/index.html  网页加载时所在的源// http://localhost:3000/api/province  axios请求的源axios({url:"http://localhost:3000/api/province"}).then(res=>{console.log(res)})</script>

跨域解决方案1–CORS

前后端分离的项目，前端和后端不在一个源，还要保证数据通信

采用CORS(跨域资源共享)，一种基于HTTP头的机制，该机制通过允许服务器标示除了它自己以为的其他源，使得浏览器允许这些源访问加载自己的资源

步骤：

服务器端 :设置Access-Control-Allow-Origin 响应头字段 允许除了它自己以外的源来访问自己的资源

1.下载cors本地软件包
2.导入cors函数
3.使用server.use() 给web服务添加插件功能
4.把cors函数调用传入给web服务 启动测试const cors = require('cors')
server.use(cors())

前端： 正常发起Ajax请求，无需额外的操作

跨域解决方案2–同源访问

开发环境用cors，上线部署关闭cors，并采用同源访问方式

做法：让后端web服务既可以提供数据接口，也可以访问网页资源

安全，后端的接口不允许非同源来访问

// 暴露指定的文件夹，让前端可以直接拼接路径和资源名字来访问
server.use(express.static(path.join(__dirname,'public')))

/* 
基于express本地软件包 开发提供省份列表数据的接口
步骤：监听get请求方法  /api/province 路径  并读取province.json里省份的数据返回给请求方
*/
// 1. 下载express软件包
// 2. 导入并创建web服务对象
const fs = require('fs')
const path = require('path')
// const cors = require('cors')
const express = require('express')
const server = express()
// server.use(cors())console.log(path.join(__dirname, 'public'))// 暴露指定的文件夹，让前端可以直接拼接路径和资源名字来访问
server.use(express.static(path.join(__dirname, 'public')))/* 
1.下载cors本地软件包
2.导入cors函数
3.使用server.use() 给web服务添加插件功能
4.把cors函数调用传入给web服务 启动测试*/// // 3. 监听请求的方法和资源路径
// server.get('/',(req,res)=>{
//     res.send("您好 欢迎使用express")
// })// 监听get请求方法  /api/province 资源路径 
server.get('/api/province', (req, res) => {// 读取province.json中数据fs.readFile(path.join(__dirname, '/data/province.json'), (err, data) => {res.send(data.toString())})
})// 4. 监听任意的请求方法和请求的资源路径
server.all('*', (req, res) => {res.status(404)res.send("您访问的资源路径不存在")
})// 5. 监听端口号 启动web服务
server.listen(3000, () => {console.log("web服务已启动")
})