【四】Vue之前后端交互及跨域问题

最新推荐文章于 2024-03-08 16:38:32 发布

Chimengmeng

最新推荐文章于 2024-03-08 16:38:32 发布

阅读量230

点赞数

文章标签： vue.js 交互前端 javascript ecmascript

本文链接：https://blog.csdn.net/Chimengmeng/article/details/132138608

版权

【一】跨域问题详解

【1】详解

跨域问题指的是在Web开发中，当一个网页上的脚本试图访问不同源(协议、域名或端口不同)的资源时所产生的安全限制。
- 这是由于浏览器的同源策略所导致的。
同源策略是一种安全机制，其目的是保护用户数据的安全。
- 根据同源策略，一个网页只能与同一来源的资源进行交互，不能直接访问其他源的数据。
- 这是因为如果没有同源策略的限制，恶意网站可以通过脚本获取用户在其他网站上的敏感信息。

【2】解决跨域问题常用的方法：

JSONP(JSON with Padding)：
- JSONP是一种利用script标签的回调函数实现的跨域通信方式。
- 通过将跨域请求的数据包装在一个函数调用中，服务器将数据以JavaScript代码返回给前端，前端再执行该代码来获取数据。
CORS(Cross-Origin Resource Sharing)：
- CORS是一种现代化的跨域解决方案。
- 它通过在服务器端设置响应头来控制跨域访问。
- 具体来说，服务器在响应头中添加特定的Access-Control-Allow-Origin字段，指定允许访问的来源，这样浏览器就会允许跨域请求。
代理：
- 通过在服务器端设置代理来实现跨域请求。
- 将需要访问的资源路径发送给同域下的服务器，然后由服务器去请求资源并将结果返回给前端。
- 这样前端就可以绕过同源策略进行跨域请求。
WebSocket：
- WebSocket是一种双向通信协议，可以在不受同源策略限制的情况下进行跨域通信。
- 通过WebSocket连接，前端和服务器之间可以建立持久性的连接，并实现实时的双向数据传输。
- 但是要注意，使用WebSocket仍然需要后端服务器支持。

【二】前后端交互的三种方式

前后端要打通----》从前端发送ajax---》核心：使用js发送http请求，接收返回
- 使用原生 JavaScript 发送 Ajax 请求
  - 这是一种传统的方式，通过使用 JavaScript 的 XMLHttpRequest 对象来发送和接收数据。
  - 开发者需要手动处理请求和响应的各个阶段，包括请求参数的拼装、请求头的设置、监听响应事件等。
  - 尽管这种方法具有灵活性，但是编写和维护复杂度较高，需要考虑不同浏览器的兼容性问题。
- 使用 jQuery 的 Ajax 方法
  - jQuery 提供了方便的 $.ajax() 方法，封装了原生的 XMLHttpRequest 对象，简化了开发者的操作流程。
  - 它支持跨浏览器兼容性，并提供了丰富的功能选项，如设置请求类型、请求头、处理错误等。
  - 然而，由于现代前端框架(如 Vue.js)一般不推荐使用 jQuery，因此在与这些框架结合使用时可能不太适合。
- 使用第三方库(如 Axios 或 Fetch)
  - 第三方库如 Axios 和 Fetch 提供更简洁、易用且功能强大的方式来发送 Ajax 请求。
  - 它们以 Promise 或 async/await 为基础，使得异步请求代码更加清晰和易于维护。
  - Axios 是一个流行的第三方库，广泛应用于前端项目中。
  - 同时，原生的 Fetch API 也是一种现代的标准方式，但需要注意兼容性问题
- fetch：原生js发送ajax请求，有的浏览器也不兼容

【1】使用jQuery的Ajax

后端

# flask框架构建后端入口
from flask import Flask, jsonify

app = Flask(__name__)


@app.route('/')
def index():
    res = jsonify({"username": 'dream', "age": 20})
    # 前后端分离后，一定会出跨域---》后面要解决的重点
    # 在响应头中加入：Access-Control-Allow-Origin ，就就可以解决跨域
    res.headers = {'Access-Control-Allow-Origin': '*'}

    return res


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

前端

<body>
<div id="app">

    <button @click="load">点我加载数据</button>
    <br>
    姓名::>>{{username}}
    <br>
    年龄::>>{{age}}
</div>
</body>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            username: "",
            age: "",
        },
        methods: {
            load() {
                // (1)后端交互方式一 ： jQuery的Ajax
                // 请求发送成功，后端执行了，但是被浏览器拦截了，因为有跨域问题
                // 当前地址，如果向非浏览器地址栏中得地址发送请求，就会出现跨域
                var _this = this
                $.ajax({
                    url: 'http://127.0.0.1:5000',
                    type: 'get',
                    success: function (data) {
                        data = JSON.parse(data)
                        _this.username = data.username
                        _this.age = data.age
                    }
                })
            },
        }
    })
</script>

【2】使用JS原生的fetch

<body>
<div id="app">

    <button @click="load">点我加载数据</button>
    <br>
    姓名::>>{{username}}
    <br>
    年龄::>>{{age}}
</div>
</body>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            username: "",
            age: "",
        },
        methods: {
            load() {
                // 2 使用js原生的fetch(目前也不用)
                // fetch('http://127.0.0.1:5000').then(function (response) {
                //     // console.log(response)
                //     return response.json();
                // }).then(function (res) {
                //     console.log(res);
                // });
                
                fetch('http://127.0.0.1:5000').then(res => res.json()).then(res => {
                    console.log(res)
                })
            }
        }
    })
</script>

【3】使用axios

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!-- Vue 的 JS 文件 -->
    <script src="vue.min.js"></script>

    <!--  CDN 链接 引入方法  -->
    <!--  jQuery 文件  -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.0/jquery.min.js">//jQuery</script>
    <!--  Bootstrap 的 CSS 样式文件  -->
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css">
    <!--  Bootstrap 的 JS 文件 (动画效果需要jQuery)  -->
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js">// bootstrap </script>
    <!--  Vue 文件  -->
    <!--    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.9/vue.min.js"></script>-->
    <!--  axios 文件  -->
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.6/axios.min.js"></script>

    <!--  以下为 css样式书写区  -->
    <style>


    </style>

</head>
<body>
<div id="app">

    <button @click="load">点我加载数据</button>
    <br>
    姓名::>>{{username}}
    <br>
    年龄::>>{{age}}
</div>
</body>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            username: "",
            age: "",
        },
        methods: {
            load() {
                // 使用axios(以后用这个)
                var _this = this
                axios.get('http://127.0.0.1:5000').then(function (res) {
                    console.log(res.data)
                    _this.username = res.data.username
                    _this.age = res.data.age
                })
            }
        }
    })
</script>
</html>

【三】后端接口处理跨域

【1】安装

pip3.9 install django-cors-headers

【2】注册app

INSTALLED_APPS = (
    ...
    'corsheaders',
    ...
)

【3】配置中间件

MIDDLEWARE = [  
    ...
    'corsheaders.middleware.CorsMiddleware',
    ...
]

【4】配置文件

配置文件中加入：setting下面添加下面的配置

CORS_ORIGIN_ALLOW_ALL = True
CORS_ALLOW_METHODS = (
    'DELETE',
    'GET',
    'OPTIONS',
    'PATCH',
    'POST',
    'PUT',
    'VIEW',
)

CORS_ALLOW_HEADERS = (
    'XMLHttpRequest',
    'X_FILENAME',
    'accept-encoding',
    'authorization',
    'content-type',
    'dnt',
    'origin',
    'user-agent',
    'x-csrftoken',
    'x-requested-with',
    'Pragma',
    'token'
)

Chimengmeng

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【四】Vue之前后端交互及跨域问题

【一】跨域问题详解【1】详解跨域问题指的是在Web开发中，当一个网页上的脚本试图访问不同源(协议、域名或端口不同)的资源时所产生的安全限制。这是由于浏览器的同源策略所导致的。同源策略是一种安全机制，其目的是保护用户数据的安全。根据同源策略，一个网页只能与同一来源的资源进行交互，不能直接访问其他源的数据。这是因为如果没有同源策略的限制，恶意网站可以通过脚本获取用户在其他网站上...
复制链接

扫一扫