什么是跨域？跨域解决方法

时间：2022-09-25 05:00:00 amy限时继电器

为什么会出现？跨域问题

由于浏览器同源策略的限制。同源策略（Sameoriginpolicy）它是浏览器的核心和基本安全功能，如果没有同源策略，浏览器的正常功能可能会受到影响。可以说Web基于同源战略，浏览器只是实现同源战略。同源战略会阻止一个域。javascript脚本与另一个域的内容互动。所谓同源(即在同一个域)是指两个页面有相同的协议（protocol），主机（host）和端口号（port。

二、什么是跨域？

1.作为请求url的协议、域名、端口三者之间任意一个与当前页面url不同的是跨域。

2.当我们对跨域概念有一定的基本理解时，开始实践跨域演示！

2.1目录结构

2.2前端页面

public/index.html

                      Document

2.3后端

// 实现get接口 const express = require('express') const app = express();  app.use(express.static('public')) // 引入bodyParse包 const bodyParser = require('body-parser') // 使用包. 则在后续的post请求中 // 会自动加入req.body属性，它包含在这个属性中post请求输入的参数 // 处理普通键值对格式 // Content-Type: application/x-www-form-urlencoded app.use(express.urlencoded())  // 处理JSON格式 // Content-Type: application/json; app.use(express.json())  // 引入multer包 const multer = require('multer');  // 配置一下multer // 如果本次post请求涉及文件上传，则上传到uploads这个文件夹下 // Content-Type: multipart/form-data; var upload = multer({ dest: 'uploads/'})   // 实现接口1： get类型接口 // 返回传入的参数，并附上时间戳 app.get('/getapi',(req,res)=>{     // 通过 req.query快速获取输入参数     console.log(req.query);     let obj = req.query          obj._t = Date.now();      res.json( obj ) })  // 接口2：普通post 键值对 app.post('/post',(req,res)=>{     // 希望在后端收到post传参     console.log(req.body);      let obj = req.body     obj._t = Date.now();          res.json(obj) })  // 接口3：用于实现JSON格式的数据 // Content-Type: application/json; app.post('/postJSON',(req,res)=>{     // 希望在后端收到post传参     console.log(req.body);          // res.send('/postJSON')     res.json( req.body ) })  // 接口4：接口formDate app.post('/publish',upload.single('cover'),(req,res)=>{     console.log('publish...')     //upload.single('cover')     // 这里的cover页面中的表单元素name     //      // 将要上传的文件放在指定的目录中     console.log(req.file);     // 其它参数，还是在req.body中找     console.log(req.body);      res.json({code:200,msg:上传成功，info:req.file.path}) })  app.listen(3000,()=>{     console.log('express应用于3000端口启动')；  })

代码报错演示