跨域报错是前端开发中非常经典的一个错误，报错如下
Access to XMLHttpRequest at '......' from origin
'......' has been blocked by CORS policy:
No 'Access-Control-Allow-Origin' header is present on the requested resource.
跨域错误源自于浏览器的同源策略，想要解决跨域首先要知道什么是同源策略？
一、同源策略？
同源策略：著名的安全策略，URL有三个基本组成部分：协议+域名或ip+端口，三个必须完全相同称之为同源，不同源的称之为跨域
URL 与 URL 对比:
http://localhost:3000/
https://localhost:3000/ 不同源：协议不同
http://localhost:3000/
http://127.0.0.1:3000/ 不同源：域名或ip不同
http://localhost:3000/
http://localhost:3001/ 不同源：端口不同
http://localhost:3000/
http://localhost:3000/ 同源
http://127.0.0.1:3000/
http://127.0.0.1:3000/ 同源
注意：同源策略不是服务器行为，而是浏览器的行为，服务器会正常响应请求，但是如果不同源会被浏览器拦截
搭建express服务器——演示
搭建一个express服务器用来演示跨域报错
安装express
npm i express
在app.js文件中
let express = require('express')
let app = express()
app.listen(3000, () => {
console.log('服务器已启动..端口3000.')
})
app.use(express.static('./views'))
app.get('/getTest', (req, res) => {
console.log(req.query)
res.send(req.query)
})
在views/index.html文件中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
最低0.47元/天 解锁文章
449
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
