浏览器同源策略

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

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

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

源

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

同源

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

跨域

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

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

javascript 复制代码

	<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 响应头字段 允许除了它自己以外的源来访问自己的资源

javascript 复制代码

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')))

javascript 复制代码

/* 
基于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服务已启动")
})