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
  • 示例項目結構 在 Visual Studio 中創建一個 WinForms 應用程式後,項目結構如下所示: MyWinFormsApp/ │ ├───Properties/ │ └───Settings.settings │ ├───bin/ │ ├───Debug/ │ └───Release/ ...
  • [STAThread] 特性用於需要與 COM 組件交互的應用程式,尤其是依賴單線程模型(如 Windows Forms 應用程式)的組件。在 STA 模式下,線程擁有自己的消息迴圈,這對於處理用戶界面和某些 COM 組件是必要的。 [STAThread] static void Main(stri ...
  • 在WinForm中使用全局異常捕獲處理 在WinForm應用程式中,全局異常捕獲是確保程式穩定性的關鍵。通過在Program類的Main方法中設置全局異常處理,可以有效地捕獲並處理未預見的異常,從而避免程式崩潰。 註冊全局異常事件 [STAThread] static void Main() { / ...
  • 前言 給大家推薦一款開源的 Winform 控制項庫,可以幫助我們開發更加美觀、漂亮的 WinForm 界面。 項目介紹 SunnyUI.NET 是一個基於 .NET Framework 4.0+、.NET 6、.NET 7 和 .NET 8 的 WinForm 開源控制項庫,同時也提供了工具類庫、擴展 ...
  • 說明 該文章是屬於OverallAuth2.0系列文章,每周更新一篇該系列文章(從0到1完成系統開發)。 該系統文章,我會儘量說的非常詳細,做到不管新手、老手都能看懂。 說明:OverallAuth2.0 是一個簡單、易懂、功能強大的許可權+可視化流程管理系統。 有興趣的朋友,請關註我吧(*^▽^*) ...
  • 一、下載安裝 1.下載git 必須先下載並安裝git,再TortoiseGit下載安裝 git安裝參考教程:https://blog.csdn.net/mukes/article/details/115693833 2.TortoiseGit下載與安裝 TortoiseGit,Git客戶端,32/6 ...
  • 前言 在項目開發過程中,理解數據結構和演算法如同掌握蓋房子的秘訣。演算法不僅能幫助我們編寫高效、優質的代碼,還能解決項目中遇到的各種難題。 給大家推薦一個支持C#的開源免費、新手友好的數據結構與演算法入門教程:Hello演算法。 項目介紹 《Hello Algo》是一本開源免費、新手友好的數據結構與演算法入門 ...
  • 1.生成單個Proto.bat內容 @rem Copyright 2016, Google Inc. @rem All rights reserved. @rem @rem Redistribution and use in source and binary forms, with or with ...
  • 一:背景 1. 講故事 前段時間有位朋友找到我,說他的窗體程式在客戶這邊出現了卡死,讓我幫忙看下怎麼回事?dump也生成了,既然有dump了那就上 windbg 分析吧。 二:WinDbg 分析 1. 為什麼會卡死 窗體程式的卡死,入口門檻很低,後續往下分析就不一定了,不管怎麼說先用 !clrsta ...
  • 前言 人工智慧時代,人臉識別技術已成為安全驗證、身份識別和用戶交互的關鍵工具。 給大家推薦一款.NET 開源提供了強大的人臉識別 API,工具不僅易於集成,還具備高效處理能力。 本文將介紹一款如何利用這些API,為我們的項目添加智能識別的亮點。 項目介紹 GitHub 上擁有 1.2k 星標的 C# ...