proxy 解決請求出錯問題
為什麼會出現跨域問題?
瀏覽器的同源策略
首先給出瀏覽器“同源策略”的一種經典定義，同源策略限制了來自不同源（相對於當前頁面而言）的document或script，對當前document的某些屬性進行讀取或是設定，舉例來說，A網站（www。aaa。com）上有某個指令碼，在B網站（www。bbb。com）未曾載入該指令碼時，該指令碼不能讀取或是修改B網站的DOM節點資料。
本地測試解決請求辦法
vite
程式碼演示
vite.config.js
import { defineConfig } from ‘vite’import vue from ‘@vitejs/plugin-vue’// https：//vitejs。dev/config/export default defineConfig（{ plugins： ［vue（）］， //中轉伺服器 server：{ //透過代理實現跨域 http：//localhost：20219 proxy：{ ‘/api’：{ //替換的伺服器地址 target： ‘http：//localhost：20219’， //開啟代理 允許跨域 changeOrigin： true， //設定重寫的路徑 rewrite： （path） => path。replace（/^\/api/， “”）， } } }}）
執行結果
Vue CLI
程式碼演示
vue。config。js
const { defineConfig } = require（‘@vue/cli-service’）module。exports = defineConfig（{ transpileDependencies： true， devServer： { //透過代理實現跨域 proxy： { ‘/path’：{ //替換的伺服器地址 target： ‘https：//localhost/prod-api’， //開啟代理 允許跨域 changeOrigin： true， //設定重寫的路徑 pathRewrite：{ ‘^/path’：‘’ } } } }}）
執行結果
fetch
Fetch API 提供了一個獲取資源的介面（包括跨域請求）。任何使用過 XMLHttpRequest 所有人都能輕鬆上手，而且新的 API 提供了更強大和靈活的功能集。
優點：
1。 語法簡潔，更加語義化
2。 基於標準 Promise 實現，支援 async/await
3。 同構方便，更加底層，提供的API豐富（request， response， body ， headers）
4。 脫離了XHR，是ES規範裡新的實現方式複製程式碼
缺點：
1。 fetch只對網路請求報錯，對400，500都當做成功的請求，伺服器返回 400，500 錯誤碼時並不會 reject。
2。 fetch預設不會帶cookie，需要新增配置項： credentials： ‘include’。
3。 fetch不支援abort，不支援超時控制，造成了流量的浪費。
4。 fetch沒有辦法原生監測請求的進度，而XHR可以
程式碼演示
Post請求
後端介面展示
user.vue
使用者頁面
執行效果
編輯Get請求
後端介面展示
user.vue
使用者頁面
執行結果
Axios
官網：Axios API | Axios 中文文件 | Axios 中文網 （axios-http。cn）
Axios 是一個基於
promise
網路請求庫，作用於node。js 和瀏覽器中。 它是
isomorphic
的（即同一套程式碼可以執行在瀏覽器和node。js中）。在服務端它使用原生 node。js http 模組， 而在客戶端 （瀏覽端） 則使用 XMLHttpRequests。
axios優點：
支援node端和瀏覽器端 支援 Promise 豐富的配置項
安裝
使用 npm:
$ npm install axios
檢視是否安裝成功
程式碼演示
Post請求
後端介面演示
User.vue
使用者頁面
執行結果
Get請求
後端介面演示
User.vue
使用者頁面
執行結果
TS 封裝Axios
程式碼演示
request index.ts
import axios from “axios”；//建立axios例項const service=axios。create（{ //url開頭 baseURL：“path”， timeout： 5000， //請求頭配置 headers：{ “Content-Type”： “application/json； charset=utf-8” }}）//請求攔截service。interceptors。request。use（（config）=>{ //請求頭放token config。headers=config。headers || {} if（localStorage。getItem（‘token’））{ config。headers。Authorization=localStorage。getItem（‘token’） || “” } return config；}）//響應攔截 service。interceptors。response。use（（res）=>{ const code：number=res。data。code // 如果響應code不為200攔截掉 if（code！=200）{ return Promise。reject（res。data） } return res。data；}，（err）=>{ // 列印錯誤請求 console。log（err）；}）export default service
request api.ts
import service from “。”；//登入介面interface LoginData{ userTelephone：string， userPassword：string}export function login（data：LoginData）{ return service（{ url：“/user/userLoginByPassword”， method： “post”， data }）}
LoginView.vue
部分使用程式碼 想看=>完整版（登入功能實現）
//呼叫登入介面 login（data。ruleForm）。then（（res） => { console。log（res） localStorage。setItem（“token”， res。data。token）； router。push（“/”）； }）；
demo案例
感興趣的可以瞭解瞭解（附原始碼）
