出于安全问题考虑, 都会有跨域限制, 你都不想浏览器在和你的服务器交互时还和别的服务器有联系吧(就好像默认不允许第三者插足). 但如果当前正在交互的服务器都同意了, 那么跨域也就没问题了(一方有这个想法, 另一方同意=>第三者成功插足/doge).
协议 域名 端口号有一个不同, 都是跨域, 注意二级域名不同也是跨域
本文章介绍三个解决跨域方法:
- script标签的jsonp
- 服务端配置允许跨域
- nginx反向代理
script标签的jsonp
JSONP是JSON with Padding的略称。它是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问(这仅仅是JSONP简单的实现形式)。–来源百度
实验
- html服务在本机5500端口, 相当于浏览器正在和5500端口交互, 去请求8080端口的服务
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="http://127.0.0.1:8080/index.js" charset="utf-8"></script>
</head>
<body>
<script>
show()
</script>
</body>
</html>
- 跨域资源文件在本机8080端口
当我们打开html, 控制台即可见到输出, 成功跨域
服务端配置允许跨域
本文章服务端使用nodejs, 其他语言也类似, 记得springboot是通过添加注解@CrossOrigin
实验
- html服务在本机5500端口, 相当于浏览器正在和5500端口交互, 去请求3000端口的服务
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<script>
fetch("http://localhost:3000")
.then(res => res.json())
.then(data => { console.log(data) })
</script>
</body>
<script>
</script>
</html>
- 服务端监听本机3000端口
const express = require('express')
const app = express()
// const cors = require('cors')
// app.use(cors({
// origin: 'http://localhost:5500',
// }))
app.get('/', (req, res) => {
res.json({ "name": "zq", "age": 18 })
}).listen(3000)
当我们打开html, 可以看到开头熟悉的报错. 将js文件中的注释打开, 重新启动服务端, 即可解决
亲测localhost 和 127.0.0.1 不能混用, 也会存在跨域
nginx反向代理
- html服务在本机5500端口, 相当于浏览器正在和5500端口交互, 去请求nginx监听的8080端口的服务
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<script>
fetch("http://localhost:8080")
.then(res => res.json())
.then(data => { console.log(data) })
</script>
</body>
<script>
</script>
</html>
- nginx监听8080端口, 将请求转发至服务端的3000端口
画线的头部可加可不加, 都可以实现跨域, 因为nginx已经帮我们配置好允许跨域
- 服务端监听本机3000端口
const express = require('express')
const app = express()
app.get('/', (req, res) => {
res.json({ "name": "zq", "age": 18 })
}).listen(3000)
参考: B站视频: https://www.bilibili.com/video/BV1Ei4y1o7jK