什么是跨域？跨域解决方法-锐单电子商城

为什么会出现？跨域问题

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

二、什么是跨域？

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

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

2.1目录结构

2.2前端页面

public/index.html

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <meta http-equiv="X-UA-Compatible" content="ie=edge">     <title>Document</title> </head> <body>     <button id="btn1_get">接口测试1：get请求带参数</button>     <button id="btn2_post"> 接口测试2:post-传递普通键值对</button>     <hr/>     <button id="btn3_postJSON">接口测试3:post-传递json</button>     <hr/>     <form id="myform">         <input type="text" name="title">         <input type="file" name="cover">     </form>     <button id="btn4_formdata">接口测试4:post-传递formdata</button>     <hr/>     <script src="./js/axios.js"></script>     <script>     document.getElementById('btn1_get').addEventListener('click',() => {         axios.get('http://localhost:3000/getapi', {params: {a:1,b:2}})     })     var obj = {         "name":"abc",         "address":{             "a":1,             "b":2,             "info":"c"         }     }     document.getElementById('btn2_post').addEventListener('click', () => {         const params = new URLSearchParams();         params.append('param1', 'value1');         params.append('param2', 'value2');         axios.post('http://localhost:3000/post', params, {             headers: {"content-type":"application/x-www-form-urlencoded"}})     })      document.getElementById('btn3_postJSON').addEventListener('click', () => {         axios.post('http://localhost:3000/postJSON', obj)     })      document.getElementById('btn4_formdata').addEventListener('click', () => {         console.log(1)         var fd = new FormData(document.getElementById('myform'));          axios.post('http://localhost:3000/publish',              fd         )     })     </script> </body> </html>

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     // <input type="file" name="cover" />     // 将要上传的文件放在指定的目录中     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端口启动')；  })

代码报错演示