快捷導(dǎo)航

Vue利用axios發(fā)送請(qǐng)求并代理請(qǐng)求的實(shí)現(xiàn)代碼

更新時(shí)間：2024年10月21日 09:36:00 作者：小李大魔王

在Web開發(fā)中,跨域問題是一個(gè)常見難題,通常由瀏覽器的同源策略引起,通過簡(jiǎn)單配置vue.config.js文件,以及安裝axios依賴,即可實(shí)現(xiàn)前后端的無縫連接和數(shù)據(jù)交換,這種方法簡(jiǎn)便有效,對(duì)于處理跨域請(qǐng)求問題非常實(shí)用

由于瀏覽器的同源策略，發(fā)送請(qǐng)求時(shí)常常遇到跨域問題，一種解決辦法是讓后端配置跨域，還有一種就是使用代理（與前端工程一起啟動(dòng)，同一個(gè)端口），因?yàn)?strong>代理不是通過瀏覽器發(fā)送的，所以不受同源策略的限制

服務(wù)器代碼

用SpringBoot工程（端口為8082）簡(jiǎn)單寫了一個(gè)Controller層，用于·接收前端發(fā)來的請(qǐng)求，并返回?cái)?shù)據(jù),前端請(qǐng)求

http://localhost:8082/students 時(shí)會(huì)返回學(xué)生列表數(shù)據(jù)，訪問 http://localhost:8082/cars 時(shí)會(huì)返回汽車列表數(shù)據(jù)

import com.example.pojo.Car;
import com.example.pojo.Student;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.List;
@RestController
public class TestController {
    private List<Student>studentList=List.of(
            Student.builder().id("001").name("張三").age(Short.valueOf("18")).build(),
            Student.builder().id("002").name("李四").age(Short.valueOf("19")).build(),
            Student.builder().id("003").name("王五").age(Short.valueOf("20")).build()
    );
    private List<Car>carList=List.of(
            Car.builder().id("001").name("奧迪").price(100000F).build(),
            Car.builder().id("002").name("瑪莎拉蒂").price(500000F).build(),
            Car.builder().id("003").name("奔馳").price(300000F).build()
    );
    @GetMapping("/students")
    public List<Student>getStudentList(){
        return studentList;
    }
    @GetMapping("/cars")
    public List<Car>getCarList(){
        return carList;
    }
}

前端代碼

通過配置代理進(jìn)行請(qǐng)求的轉(zhuǎn)發(fā)，實(shí)現(xiàn)跨域訪問，在vue.config.js文件中配置如下代碼

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  //開啟代理服務(wù)器
  devServer:{
    proxy: {
      '/api': {
        target: 'http://localhost:8082/', // 你想要代理到的地址
        pathRewrite: {
          '^/api': '/' // 重寫路徑，將 /api 替換為 /
        }
      }
    }
  }
})

通過axios發(fā)送請(qǐng)求，先在終端輸入 npm i axios 引入axios的依賴包，然后通過一下代碼發(fā)送請(qǐng)求

axios.get("/api/students")
    .then(
    	//請(qǐng)求成功的回調(diào)函數(shù)
        response=>{
            this.studentList=response.data
         },
    	//請(qǐng)求失敗的回調(diào)函數(shù)
        err=>{
            alert(err.message)
        }
    )

到此這篇關(guān)于Vue利用axios發(fā)送請(qǐng)求并代理請(qǐng)求的文章就介紹到這了,更多相關(guān)Vue axios發(fā)送請(qǐng)求內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: