1 前言

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

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

本文將會(huì)使用axios進(jìn)行請求

2 axios介紹

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

下載axios

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

npm i axios

這個(gè)庫非常的小，安裝很快

引入axios

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

// 引入axios
import axios from 'axios'

3 模擬場景

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

后端接口

后端起一個(gè)服務(wù)，端口為9090，有一個(gè)get請求，先訪問下，因?yàn)槭莋et請求，可以直接在瀏覽器訪問，所以說接口是沒問題的

前端請求

有了后端的接口，我們就可以在前端去請求了，上述已經(jīng)安裝好了axios，所以直接編寫代碼請求后端接口，通過控制臺(tái)可以看到，前端的端口是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ā)送請求后會(huì)有兩個(gè)回調(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)控制臺(tái)報(bào)錯(cuò)了，這是一個(gè)很經(jīng)典的跨域問題

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

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

上面的例子就算因?yàn)榍昂蠖送ㄐ诺亩丝诓灰恢略斐傻目缬騿栴}

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

1 cors
2 JSONP
3 代理

我們一一舉例說明

5 解決跨域 cors

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

cors

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

注解解決跨域

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

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

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

全局配置跨域

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

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

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

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

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

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

JSONP

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

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

代理

由于篇幅問題，我另外寫了一篇文章，大家可以參考：Vue項(xiàng)目打包部署到iis服務(wù)器的配置方法

到此這篇關(guān)于解決Vue前后端跨域問題的多種方式的文章就介紹到這了,更多相關(guān)vue前后端跨域內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論