解决Vue前后端跨域问题的多种方式

缺乏、安全感 2023-09-23 15:41 93阅读 0赞

## 1 前言 ##

本文主要介绍借助解决Vue前后端跨域问题的几种方式

说到ajax请求，就不得不说下xhr(XMLHttpRequest)了，它可以说是鼻祖，但是实际开发中，我们不会直接使用它，而是进行二次封装或者使用成熟的第三方封装，比如JQuery，axios

本文将会使用axios进行请求

## 2 axios介绍 ##

既然说到封装了，那就不得不提到axios了，它和JQuery相比，它支持请求拦截器和响应拦截器，并且体积很小，大约是JQuery的四分之一体积，一般在vue项目里面，基本都是使用axios请求

### 下载axios ###

想要使用axios，必须先下载它，打开终端，输入

npm i axios

这个库非常的小，安装很快

![在这里插入图片描述][44ce619b398e4a89b4e0d3cd5b3f277d.png]

### 引入axios ###

下载完毕之后，就可以引用了

// 引入axios
    import axios from 'axios'

![在这里插入图片描述][5715b58d9d4346c4a98fa959bebbfbed.png]

## 3 模拟场景 ##

基本工作做完后，就可以开发前后端代码，模拟跨域场景了

### 后端接口 ###

后端起一个服务，端口为9090，有一个get请求，先访问下，因为是get请求，可以直接在浏览器访问，所以说接口是没问题的

![在这里插入图片描述][bcc20fdbb37d46f0b4b6d5ed0b190924.png]  
![在这里插入图片描述][0c77b0c071e5403a991468639724d27c.png]

### 前端请求 ###

有了后端的接口，我们就可以在前端去请求了，上述已经安装好了axios，所以直接编写代码请求后端接口，通过控制台可以看到，前端的端口是8080  
![在这里插入图片描述][f8a610675cff4037aa29338f3734728d.png]

<template>
        <div>
            <button @click="getInfo">获取信息</button>
        </div>
    </template>
    
    <script>
        // 引入axios
        import axios from 'axios'
        export default {
        
                name:'App', 
                methods:{
        
                    getInfo(){
        
                        // 使用axios发送请求(get) 发送请求后会有两个回调
                        axios.get('http://localhost:9090/queryUserInfo').then(
                            // 成功回调
                            success=>{
        
                                console.log('请求成功！')
                                // 请求成功后的数据
                                console.log(success.data)
                            },
                            // 失败回调
                            error=>{
            
                                console.log('请求失败！')
                                // 请求失败原因
                                console.log(error.message)
                            }
                        )
                    }
                }
            }
    </script>

然后发送请求，发现控制台报错了，这是一个很经典的跨域问题  
![在这里插入图片描述][d96d3de21ff24a1192464d5c57459b26.png]

## 4 发现跨域问题 ##

所谓的跨域请求就是指：当前发起请求的域与该请求指向的资源所在的域不一样。这里的域指的是这样的一个概念：我们认为若协议 + 域名 + 端口号均相同，那么就是同域。

上面的例子就算因为前后端通信的端口不一致造成的跨域问题

常用的解决问题的手段有以下三种

1 cors  
2 JSONP  
3 代理

我们一一举例说明

## 5 解决跨域 ##

### cors ###

这种方式是我工作中处理跨域用到最多也是最简单的一种方式，直接通过注解解决跨域问题

cors解决跨域，一般不用于前端做任何事，而是后端或者服务器去操作，其实就是在服务器里面返回相应的时候加几个响应头，某种程度上来说，cors解决跨域才是真正意义上的解决跨域，但是在开发中，这个响应头不是随便配置的，如果随意配置，就会造成一个问题就算任何人都能找服务器要数据，存在一些安全风险

#### 注解解决跨域 ####

在后端的controller或某个具体方法上可以加上@CrossOrigin注解解决跨域  
![在这里插入图片描述][2aa39dcb94064c259ee49abbd756226b.png]  
加完注解后，这个时候重启后端服务器再访问，发现问题解决  
![在这里插入图片描述][8bcd9391a9e642e5a712f37e88e05a39.png]  
值得注意的是，@CrossOrigin这个注解默认是解决全部路径的跨域，有时候一些参数需要自己设置，否则可能会有安全隐患

![在这里插入图片描述][a04adee948ed4cbabea7f5a428c24955.png]

#### 全局配置跨域 ####

如果使用注解，那么我们需要在每一个controller或者方法上都要加上注解才能解决跨域的问题

那么有没有一种一劳永逸的办法呢？

当然有，我们可以使用全局配置跨域，代码如下：

注意：一定不要忘了使用@Configuration注解配置到项目中，否则无效，具体的一些参数或者路径，根据自身需求设置即可  
![在这里插入图片描述][d0ed370b57844906b9eeabf13775ff11.png]

package com.wyh.config;
    
    import org.springframework.context.annotation.Configuration;
    import org.springframework.web.servlet.config.annotation.CorsRegistry;
    import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
    
    @Configuration
    public class CorsMapping implements WebMvcConfigurer {
        
    
        @Override
        /**
         * 重新跨域支持方法
         * CorsRegistry  开启跨域注册
         */
        public void addCorsMappings(CorsRegistry registry) {
        
            //addMapping 添加可跨域的请求地址
            registry.addMapping("/**")
                    //设置跨域 域名权限 规定由某一个指定的域名+端口能访问跨域项目
                    .allowedOrigins("*")
                    //是否开启cookie跨域
                    .allowCredentials(false)
                    //规定能够跨域访问的方法类型
                    .allowedMethods("GET","POST","DELETE","PUT","OPTIONS")
                    //添加验证头信息  token
                    //.allowedHeaders()
                    //预检请求存活时间 在此期间不再次发送预检请求
                    .maxAge(3600);
        }
    }

以上就是通过cors解决跨域的两种方式

### JSONP ###

除了使用cors解决跨域，还可以使用JSONP，它解决跨域的方式其实挺巧妙的，它借助了script标签li的src属性，在引入外部资源的时候不受同源策略限制的特点办到的，虽然JSONP比较巧妙，但是真正开发中用到的微乎其微，因为想要实现JSONP解决跨域，不仅仅要前端人员要用到特殊写法，后端人员也得配置前端才能实现，并且只能解决get请求跨域问题，相对来说很鸡肋

这里就得吐槽一句了，虽然开发用的少，但是面试就喜欢问你JSONP，就看你知道不知道这个巧

### 代理 ###

由于篇幅问题，我另外写了一篇文章，大家可以参考：[使用Vue脚手架配置代理服务器的两种方式  
][Vue_]

[44ce619b398e4a89b4e0d3cd5b3f277d.png]: https://img-blog.csdnimg.cn/44ce619b398e4a89b4e0d3cd5b3f277d.png
[5715b58d9d4346c4a98fa959bebbfbed.png]: https://img-blog.csdnimg.cn/5715b58d9d4346c4a98fa959bebbfbed.png
[bcc20fdbb37d46f0b4b6d5ed0b190924.png]: https://img-blog.csdnimg.cn/bcc20fdbb37d46f0b4b6d5ed0b190924.png
[0c77b0c071e5403a991468639724d27c.png]: https://img-blog.csdnimg.cn/0c77b0c071e5403a991468639724d27c.png
[f8a610675cff4037aa29338f3734728d.png]: https://img-blog.csdnimg.cn/f8a610675cff4037aa29338f3734728d.png
[d96d3de21ff24a1192464d5c57459b26.png]: https://img-blog.csdnimg.cn/d96d3de21ff24a1192464d5c57459b26.png
[2aa39dcb94064c259ee49abbd756226b.png]: https://img-blog.csdnimg.cn/2aa39dcb94064c259ee49abbd756226b.png
[8bcd9391a9e642e5a712f37e88e05a39.png]: https://img-blog.csdnimg.cn/8bcd9391a9e642e5a712f37e88e05a39.png
[a04adee948ed4cbabea7f5a428c24955.png]: https://img-blog.csdnimg.cn/a04adee948ed4cbabea7f5a428c24955.png
[d0ed370b57844906b9eeabf13775ff11.png]: https://img-blog.csdnimg.cn/d0ed370b57844906b9eeabf13775ff11.png
[Vue_]: https://blog.csdn.net/weixin_46713508/article/details/127942851?csdn_share_tail=%7B%22type%22:%22blog%22,%22rType%22:%22article%22,%22rId%22:%22127942851%22,%22source%22:%22weixin_46713508%22%7D