Vuejs013---关于跨域请求的处理（ajax）

本文链接：https://blog.csdn.net/rngigskt/article/details/119919059

1.关于跨域请求的处理

同源：同源是指在一般情况下，浏览器发出请求访问的资源都是在相同的协议、域名、和端口号下的，这样的请求即为默认同源策略的访问。

由于浏览器的同源策略，凡是发送请求 url 的协议、域名、端口号三者之间任意一个（或者多个）与当前页面地址不同即为跨域。

在实际项目开发中，使用的当前页面有可能会发出这样的请求，访问的是非同源的资源，那么我们就需要进行跨域处理。

（1）举个栗子

http: 协议

192.168.1.1ip 地址：域名

8080: 端口号

当前页面：

http://192.168.1.1:8080/xxx/xxx.jsp

发出请求：

http://192.168.1.1:8080/xxx/yyy.do

以上我们发出的请求的协议， ip ，端口号完全相同，就是发出的是同源请求的操作。

发出请求：

https://192.168.1.1:8080/xxx/yyy.do 协议不同

http://192.168.1.2:8080/xxx/yyy.do 域名（ ip ）不同

或者 myweb.com 访问 baidu.com 域名不同

http://192.168.1.1:8088/xxx/yyy.do 端口号不同

以上请求协议， ip ，端口号三大要素均有不同，需要进行跨域请求的操作。

2.跨域请求的常用处理方式：

（1）代理方式

代理用于将请求发送给后台服务器，通过服务器来发送请求，然后将请求的结果传递给前端。通过 nginx 代理来实现操作。

优点：跨域服务稳定。

缺点：在使用到跨域处理的时候，必须要事先搭建 nginx 服务的代理环境，比较麻烦。

（2）CORS 方式

CORS 是 w3c 标准的方式，通过在 web 服务器端的设置响应头 Access-Control-Alow-Origin 来指定哪些域可以访问本域的数据。

优点：使用简单，支持基于 HTTP 协议的所有请求方式。

缺点：跨域服务响应稍慢。

（3）jsonp 方式

通过动态插入一个 script 标签。浏览器对 script 的资源引用没有同源限制，同时资源加载到页面后回立即执行。

优点：使用简单，跨域服务响应快，获取的数据是我们最常见的 json格式的数据。

缺点：只能发送 get 请求，无法发送 post 请求。

由于在开发中发出跨域请求的目的通常是为了取得指定的资源数据，所以一般都是发出 get 请求，由于 jsonp 的形式使用简单，而且关于接收的响应数据，是程序员使用最多的 json 格式的数据，所以该形式在企业中应用的比较广泛。

jsonp 方式代码片段：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/";
%>
<html>
<head>
    <base href="<%=basePath%>">
    <title>mytitle</title>
    <!--

        导入axios插件来实现ajax请求

    -->
    <script src="vue/vue-2.4.0.js"></script>

    <!--

        之前老师在讲解ajax的时候，最后总结时说道推荐使用axios的方式
        但是，如果想要处理跨域请求，那么我们就必须要使用vue-resource的方式
    -->
    <%--<script src="vue/axios.min.js"></script>--%>
    <script src="vue/vue-resource-1.3.4.js"></script>
</head>
<body>

    <div id="app">

        <button @click="getStudent">点击取得学生信息</button>

        <br/>
        <br/>

        编号：<span>{{id}}</span><br/>
        姓名：<span>{{name}}</span><br/>
        年龄：<span>{{age}}</span><br/>

    </div>

    <script>

        var vm = new Vue({

            el : "#app",
            data : {

                "id" : "",
                "name" : "",
                "age" : ""

            },
            methods : {

                getStudent(){

                    /*

                        案例：
                            当前项目所在服务器为
                            协议：http
                            域名：localhost
                            端口号：8080

                            将请求发送到以下配置的服务器，来从跨域的服务器中接收数据
                            协议：http
                            域名：localhost
                            端口号：8088

                     */

                    //使用jsonp的方式发出跨域请求
                    this.$http.jsonp("http://localhost:8088/ky01/getKyStudentData.do").then(result=>{

                        result = result.body;

                        this.id = result.id;
                        this.name = result.name;
                        this.age = result.age;


                    })

                }

            }

        })



    </script>


</body>
</html>