react axios 跨域訪問一個或多個功能變數名稱

来源:https://www.cnblogs.com/SuperBrother/archive/2020/04/11/12679928.html
-Advertisement-
Play Games

1.react + axios 跨域訪問一個功能變數名稱 配置非常簡單,只需要在當前的 package.json 文件裡面配置: "proxy":"http://iot-demo-web-dev.autel.com", //當然,這裡是一個假地址 像這樣: 這樣跨域便完成了,當然,也可以像網上那樣,多幾段代 ...


1.react + axios 跨域訪問一個功能變數名稱

配置非常簡單,只需要在當前的 package.json 文件裡面配置:

"proxy":"http://iot-demo-web-dev.autel.com", //當然,這裡是一個假地址

 像這樣:

 

 

 這樣跨域便完成了,當然,也可以像網上那樣,多幾段代碼,像這樣:

 

 

 我不知道你們寫入這段代碼會怎麼樣,反正我是會報錯,具體報錯是怎麼我這裡沒辦法展示,因為我的項目已經 運行了 npm run eject 這個命令

報錯的意思大概就是 proxy 希望得到的是一個字元串,而現在得到的是一個對象,所已我只能採取 第一張圖片的方法進行跨域

 

而後我們安裝axios ,當然,其他的也行,在 src 目錄項目建一個 api文件, 再在api文件裡面建一個 user.js 寫上下麵這段代碼

import axios from 'axios'

export function _user(data) {
  return axios.get('device/detail', data)
}

 我這裡的跨域使用的是第一張圖片上的那種跨域

 在你需要發送請求的地方寫上以下代碼:

import { _user } from '../api/user'

  componentDidMount() {
    let res = _user({})
    console.log(res)
  }

 接下來咱們就能愉快的獲得後臺給我們的數據了

 

上面的那種跨域呢,可以說是非常方便,但是吧,如果後臺給我們兩個甚至三個不同的功能變數名稱呢   怎麼辦,那我們就得使用插件

 

2.react +axios 跨域訪問多個功能變數名稱

安裝插件:npm install --save http-proxy-middleware

安裝好了之後咱們是開始配置啦:

 1.首先運行命令將配置暴露出來

    

npm run eject
or
yarn eject

   在這裡你可能會遇到一個報錯:

 

 

  那這個時候你可以將報錯百度一下,或者跟著我繼續操作

 報錯的原因呢是因為咱們在使用腳手架搭建 react 時,系統會自動給我們添加一個 .gitignore 文件,如果你沒有提交到倉庫過,你就需要先提交到倉庫

    

 

 

  完成這兩步之後就可以繼續 命名 npm run eject ,等配置文件暴露完成之後,你的 package.json 可能非常多配置,咱們不用管,在 src 下麵建一個 setupProxy.js 在裡面寫上下麵代碼:

const { createProxyMiddleware } = require('http-proxy-middleware')
module.exports = function (app) {
  app.use(
    createProxyMiddleware('/api', {
      target: 'http://iot-demo-web-server-dev.autel.com',
      changeOrigin: true,
    })
  )
  app.use(
    '/sys',
     createProxyMiddleware({
      target: 'http://localhost:5001',
      changeOrigin: true,
    })
  );
}

  

 找到 scripts 路徑 打開 strat.js

 

 

 

 在第 117行左右 寫上下麵代碼:

require('../src/setupProxy')(devServer)  //註意路徑是否正,是你剛纔建的那個文件

  

 

 

 如此 多個跨域便成功了,值得註意的就是, 需要在你請求的具體路徑前面加上 api 或 sys 像這樣

 

 ps: 雖然這篇教程不值錢,但也是本人辛苦創作,如需轉載,請附上原文連接,謝謝!


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 一、js設置樣式的方法 1\. 直接設置style的屬性 某些情況用這個設置 !important值無效 ~~~ element.style.height = '50px'; ~~~ 2\. 直接設置屬性 (只能用於某些屬性,相關樣式會自動識別) 3\. 設置style的屬性 ~~~ element ...
  • 前言 最近在開發時遇見一個問題 我們知道a標簽是沒有 屬性的,那麼如何實現a標簽按鈕的禁用呢? 轉換一下思維,設置 屬性的元素表現為不能點擊、無法獲得游標焦點,那麼我們不用 屬性實際上也可以達到同樣的效果! 方法一:移除點擊事件 或`touchend` 我們可以直接使用jquery:unbind() ...
  • 1\. onchange onchange 事件會在域的內容改變時觸發。支持的標簽, , ,。 註意:在元素的值改變了且失去焦點時觸發(兩次的值一樣不會觸發)。 缺陷:通過js代碼改變DOM的值不會觸發,解決在js代碼里改值了調用其change 的 function() 或者調.change()方法 ...
  • HTML中的空格的規則 在html中內容中的多個空格一般會被視為一個,連續的多個空格符被自動合併了。同時內容前後的空格也會被清除, 如下: ~~~ fly63 com ~~~ 顯示效果為: ~~~ fly63 com ~~~ 備註:瀏覽器的這種機制處理,同樣適用於除了普通的空格鍵,還包括製表符(\\ ...
  • 禁止選中文本 css 寫法 js 寫法 禁止滑鼠右鍵 ...
  • 在面試的過程中遇到一個這樣的題目: 比如有一段HTML字元串: 其實匹配html標簽的正則表達式很短,如下: ]+ 就這樣,沒了?是的。你驚訝嗎? 這個正則表達式也是收集於網路,但是我可以看懂,首先,html標簽肯定是以符號結束(不管是不是自閉合),只是中間有點糾結,可能有字元,數字,引號,換行符— ...
  • 為什麼需要封裝echarts 每個開發者在製作圖表時都需要從頭到尾書寫一遍完整的option配置,十分冗餘 在同一個項目中,各類圖表設計十分相似,甚至是相同,沒必要一直做重覆工作 可能有一些開發者忘記考慮echarts更新數據的特性,以及視窗縮放時的適應問題。這樣導致數據更新了echarts視圖卻沒 ...
  • 眾所周知,前端工程師的首要工作就是開發用戶界面,因此我們可以把前端工程師看做是用戶體驗的把控者。正所謂責任越大能力越大,前端工程師的工作內容也讓這一崗位需要具備更多的能力,除了精通HTML、CSS這樣的基礎知識,對前端要求更高的其實是非技術因素。下麵我們一起來看看前端工程師需要具備哪些基本素質。 1 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...