跨域解决

最新推荐文章于 2024-06-05 00:40:27 发布

weixin_45917427

最新推荐文章于 2024-06-05 00:40:27 发布

阅读量1.6k

点赞数

文章标签： nginx http jsonp vue nodejs

本文链接：https://blog.csdn.net/weixin_45917427/article/details/122882930

版权

出于安全问题考虑, 都会有跨域限制, 你都不想浏览器在和你的服务器交互时还和别的服务器有联系吧(就好像默认不允许第三者插足). 但如果当前正在交互的服务器都同意了, 那么跨域也就没问题了(一方有这个想法, 另一方同意=>第三者成功插足/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

weixin_45917427

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
跨域解决

出于安全问题考虑, 都会有跨域限制, 你都不想浏览器在和你的服务器交互时还和别的服务器有联系吧(就好像默认不允许第三者插足). 但如果当前正在交互的服务器都同意了, 那么跨域也就没问题了(一方有这个想法, 另一方同意=>第三者成功插足/doge). 协议域名端口号有一个不同, 都是跨域, 注意二级域名不同也是跨域本文章介绍三个解决跨域方法:script标签的jsonp服务端配置允...
复制链接

扫一扫