1 前言

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

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

本文將會使用axios進行請求

2 axios介紹

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

下載axios

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

npm i axios

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

引入axios

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

// 引入axios import axios from 'axios'

3 模擬場景

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

后端接口

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

前端請求

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

<template><div><button @click="getInfo">獲取信息</button></div> </template><script>// 引入axiosimport 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解決跨域，一般不用于前端做任何事，而是后端或者服務(wù)器去操作，其實就是在服務(wù)器里面返回相應(yīng)的時候加幾個響應(yīng)頭，某種程度上來說，cors解決跨域才是真正意義上的解決跨域，但是在開發(fā)中，這個響應(yīng)頭不是隨便配置的，如果隨意配置，就會造成一個問題就算任何人都能找服務(wù)器要數(shù)據(jù)，存在一些安全風險

注解解決跨域

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

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

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

全局配置跨域

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

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

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

注意：一定不要忘了使用@Configuration注解配置到項目中，否則無效，具體的一些參數(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ī)定由某一個指定的域名+端口能訪問跨域項目.allowedOrigins("*")//是否開啟cookie跨域.allowCredentials(false)//規(guī)定能夠跨域訪問的方法類型.allowedMethods("GET","POST","DELETE","PUT","OPTIONS")//添加驗證頭信息 token//.allowedHeaders()//預(yù)檢請求存活時間 在此期間不再次發(fā)送預(yù)檢請求.maxAge(3600);} }

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

JSONP

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

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

代理

由于篇幅問題，我另外寫了一篇文章，大家可以參考：使用Vue腳手架配置代理服務(wù)器的兩種方式

總結(jié)

以上是生活随笔為你收集整理的解决Vue前后端跨域问题的多种方式的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。