vue 改成https访问后端识别不到是https访问_Vue - 与后端交互

最新推荐文章于 2024-04-10 17:12:24 发布

麟翛

最新推荐文章于 2024-04-10 17:12:24 发布

阅读量2.6k

点赞数

文章标签： vue 改成https访问后端识别不到是https访问

本文链接：https://blog.csdn.net/weixin_31317351/article/details/113668884

版权

Ⅰ 与后端交互 - ajax

版本1 - 出现了跨域问题

前端：index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue与后端交互 - 出现了跨域问题</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>
<div id="box">
    <button @click="handleClick">加载数据</button>
</div>
</body>
<script>
    let vm = new Vue({
    
        el: '#box',
        data: {
    },
        methods: {
    
            handleClick() {
    
                $.ajax({
    
                    url: 'http://127.0.0.1:5000/',    // 发送请求的url，本地的5000端口，是flask的默认端口
                    method: 'get',
                    success: (data) => {
    
                        console.log(data)
                    }
                })
            }
        }
    })
</script>
</html>

后端：main.py

from flask import Flask    # 这里用轻量级的Flask框架来测试

app = Flask(__name__)


@app.route('/')
def index():
    print('请求来了')
    return 'Hello World'


if __name__ == '__main__':
    app.run()

这里可以看出：前端向后端成功发送了请求，后端也成功响应了，但是前端却报错了
这是因为：跨域问题的存在，浏览器检测到前端和后端不是来自同一个域，所以认为这是不安全的，所以就拦截了该资源的传递
想要解决这个问题，就要实现：CORS，也就是 跨域资源共享

版本2 - 解决了跨域问题

前端：index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue与后端交互 - 解决了跨域问题</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>
<div id="box">
    <button @click="handleClick">加载数据</button>
    <p>加载的数据：{
    {myText}}</p>
</div>
</body>
<script>
    let vm = new Vue({
    
        el: '#box',
        data: {
    
            myText: ''
        },
        methods: {
    
            handleClick() {
    
                $.ajax({
    
                    url: 'http://127.0.0.1:5000/',
                    method: 'get',
                    success: (data) => {
    
                        console.log(data)
                        this.myText = data
                    }
                })
            }
        }
    })
</script>
</html>

后端：main.py

from flask import Flask, make_response

app = Flask(__name__)


@app.route('/')
def index():
    print('请求来了')
    res = make_response('Hello World')
    res.headers['Access-Control-Allow-Origin'] = '*'    # 访问控制允许的源 设置为全部
    return res


if __name__ == '__main__':
    app.run()

版本3 - 后端读取json文件传到前端

json文件：file.json

{
    
  "name": "Darker",
  "age": "18",
  "gender": "male"
}

前端：index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue与后端交互 - json</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>
<div id="box">
    <button @click="handleClick">加载数据</button>
    <p>加载的数据：{
    {myText}}</p>
</div>
</body>
<script>
    let vm = new Vue({
    
        el: '#box',
        data: {
    
            myText: ''
        },
        methods: {
    
            handleClick() {
    
                $.ajax({
    
                    url: 'http://127.0.0.1:5000/',
                    method: 'get',
                    success: (data) => {
    
                        console.log(data)
                        this.myText = data
                    }
                })
            }
        }
    })
</script>
</html>

后端：main.py

最低0.47元/天解锁文章

麟翛

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue 改成https访问后端识别不到是https访问_Vue - 与后端交互

Ⅰ 与后端交互 - ajax版本1 - 出现了跨域问题前端：index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Vue与后端交互 - 出现了跨域问题</title> <script src=...
复制链接

扫一扫