腳本之家服務器常用軟件

快捷導航

解決Vue前后端跨域問題的方式匯總

更新時間：2022年11月25日 17:22:08 作者：小花皮豬

這篇文章主要介紹了解決Vue前后端跨域問題的多種方式,本文主要介紹借助解決Vue前后端跨域問題的幾種方式，將會使用axios進行請求需要的朋友可以參考下

1 前言

本文主要介紹借助解決Vue前后端跨域問題的幾種方式

說到ajax請求，就不得不說下xhr(XMLHttpRequest)了，它可以說是鼻祖，但是實際開發(fā)中，我們不會直接使用它，而是進行二次封裝或者使用成熟的第三方封裝，比如JQuery，axios

本文將會使用axios進行請求

2 axios介紹

既然說到封裝了，那就不得不提到axios了，它和JQuery相比，它支持請求攔截器和響應攔截器，并且體積很小，大約是JQuery的四分之一體積，一般在vue項目里面，基本都是使用axios請求

下載axios

想要使用axios，必須先下載它，打開終端，輸入

npm i axios

這個庫非常的小，安裝很快

引入axios

下載完畢之后，就可以引用了

// 引入axios
import axios from 'axios'

3 模擬場景

基本工作做完后，就可以開發(fā)前后端代碼，模擬跨域場景了

后端接口

后端起一個服務，端口為9090，有一個get請求，先訪問下，因為是get請求，可以直接在瀏覽器訪問，所以說接口是沒問題的

前端請求

有了后端的接口，我們就可以在前端去請求了，上述已經(jīng)安裝好了axios，所以直接編寫代碼請求后端接口，通過控制臺可以看到，前端的端口是8080

<template>
    <div>
        <button @click="getInfo">獲取信息</button>
    </div>
</template>
<script>
    // 引入axios
    import axios from 'axios'
    export default {
            name:'App', 
            methods:{
                getInfo(){
                    // 使用axios發(fā)送請求(get) 發(fā)送請求后會有兩個回調(diào)
                    axios.get('http://localhost:9090/queryUserInfo').then(
                        // 成功回調(diào)
                        success=>{
                            console.log('請求成功！')
                            // 請求成功后的數(shù)據(jù)
                            console.log(success.data)
                        },
                        // 失敗回調(diào)
                        error=>{    
                            console.log('請求失??！')
                            // 請求失敗原因
                            console.log(error.message)
                        }
                    )
                }
            }
        }
</script>

然后發(fā)送請求，發(fā)現(xiàn)控制臺報錯了，這是一個很經(jīng)典的跨域問題

4 發(fā)現(xiàn)跨域問題

所謂的跨域請求就是指：當前發(fā)起請求的域與該請求指向的資源所在的域不一樣。這里的域指的是這樣的一個概念：我們認為若協(xié)議 + 域名 + 端口號均相同，那么就是同域。

上面的例子就算因為前后端通信的端口不一致造成的跨域問題

常用的解決問題的手段有以下三種

1 cors
2 JSONP
3 代理

我們一一舉例說明

5 解決跨域 cors

這種方式是我工作中處理跨域用到最多也是最簡單的一種方式，直接通過注解解決跨域問題

cors

解決跨域，一般不用于前端做任何事，而是后端或者服務器去操作，其實就是在服務器里面返回相應的時候加幾個響應頭，某種程度上來說，cors解決跨域才是真正意義上的解決跨域，但是在開發(fā)中，這個響應頭不是隨便配置的，如果隨意配置，就會造成一個問題就算任何人都能找服務器要數(shù)據(jù)，存在一些安全風險

注解解決跨域

在后端的controller或某個具體方法上可以加上@CrossOrigin注解解決跨域

加完注解后，這個時候重啟后端服務器再訪問，發(fā)現(xiàn)問題解決

值得注意的是，@CrossOrigin這個注解默認是解決全部路徑的跨域，有時候一些參數(shù)需要自己設置，否則可能會有安全隱患

全局配置跨域

如果使用注解，那么我們需要在每一個controller或者方法上都要加上注解才能解決跨域的問題

那么有沒有一種一勞永逸的辦法呢？

當然有，我們可以使用全局配置跨域，代碼如下：

注意：一定不要忘了使用@Configuration注解配置到項目中，否則無效，具體的一些參數(shù)或者路徑，根據(jù)自身需求設置即可

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("/**")
                //設置跨域 域名權(quán)限 規(guī)定由某一個指定的域名+端口能訪問跨域項目
                .allowedOrigins("*")
                //是否開啟cookie跨域
                .allowCredentials(false)
                //規(guī)定能夠跨域訪問的方法類型
                .allowedMethods("GET","POST","DELETE","PUT","OPTIONS")
                //添加驗證頭信息  token
                //.allowedHeaders()
                //預檢請求存活時間 在此期間不再次發(fā)送預檢請求
                .maxAge(3600);
    }
}

以上就是通過cors解決跨域的兩種方式

JSONP

除了使用cors解決跨域，還可以使用JSONP，它解決跨域的方式其實挺巧妙的，它借助了script標簽li的src屬性，在引入外部資源的時候不受同源策略限制的特點辦到的，雖然JSONP比較巧妙，但是真正開發(fā)中用到的微乎其微，因為想要實現(xiàn)JSONP解決跨域，不僅僅要前端人員要用到特殊寫法，后端人員也得配置前端才能實現(xiàn)，并且只能解決get請求跨域問題，相對來說很雞肋

這里就得吐槽一句了，雖然開發(fā)用的少，但是面試就喜歡問你JSONP，就看你知道不知道這個巧