這篇文章主要介紹了react axios 跨域訪(fǎng)問(wèn)一個(gè)或多個(gè)域名問(wèn)題，跨域本文通過(guò)實(shí)例代碼截圖的訪(fǎng)??問(wèn)形??式給大家展示(shi)的非常詳細，對大家的個(gè)或學(xué)習或工作具有一定的參考借鑒價(jià)值,需要的朋友可ヾ(＾-＾)ノ以參考下

1.react + axios 跨域訪(fǎng)問(wèn)一個(gè)域名

配置非常簡(jiǎn)單，只需要在當前的域名 package.json 文件里面配置：

"proxy":"http://iot-demo-web-dev.autel.com", //當然，這里是問(wèn)題一個(gè)假地址

像這樣：

這樣跨域便完成了，當ヾ(′?｀)?然，跨域也可以像網(wǎng)上那樣，訪(fǎng)ヾ(′?｀)?問(wèn)多幾段代碼??，個(gè)或像這樣：

我不知道你們寫(xiě)入這段代碼會(huì )怎么樣，域名反正我是問(wèn)題會(huì )報錯，具體報(′-ι_-｀)錯是跨域怎么我這里沒(méi)辦法展示，因為我的訪(fǎng)問(wèn)項目已經(jīng) 運行了 npm run eject 這個(gè)命令

報錯的意思大概就是 proxy 希望得到的是一個(gè)字符串，而現在得到的個(gè)或是一個(gè)對象，所已我只能采取 第一張圖片的域名方法進(jìn)(jin)行跨域

import axios from 'axios'

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

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

在你需要發(fā)送請求的地方寫(xiě)上以下代碼：

import { _user } from '../api/user'ヽ(′▽?zhuān)?ノ

componentDidMount() {
let res = _user({ })
cons(◎_◎;)ole.log(res)
}

接(′▽?zhuān)?)下來(lái)咱們就能愉快的獲得后臺給我們的數據了

上面的那種跨域呢，可以說(shuō)是非常方便，但是吧，如果后臺給我們兩個(gè)甚至三個(gè)不同的域名呢 怎么辦，那我們就得使用插件

2.react +axios 跨域訪(fǎng)問(wèn)多個(gè)域名

安裝插件：npm install --save http-proxy-middleware安裝好了之后咱們是開(kāi)始配置啦：

1.首先暫時(shí)運行命令將配置暴露出來(lái)

np???m run eject
or
yar??n eject

那這個(gè)時(shí)候你可以將報錯百度一下，或者跟著(zhù)我繼續操作

報錯的原(╬?益?)因呢是因為咱們在使用腳手架搭建 react 時(shí)，系統會(huì )自動(dòng)給我們添加一個(gè) .gitignore 文件，??如果你沒(méi)有提交到倉庫過(guò)，你就需要先提交到倉庫

完成這兩步之后就可以繼續 命名 npm run eject ，等配置文件暴露完成之后，你的 package.json 可能(neng)非常多??配置，咱們??不用管，在 src(╬?益?) 下面建(′?_?`)一個(gè) setupProxy.js 在里面?寫(xiě)上下面代碼：

const { createPrヾ(′ω｀)?oxyMiddleware } = require('http??-proxy-middleware')
module.exports = function (app) {
app.use(
createP(°ロ°) !roxyMiddleware('/api', {
target: 'http://iot-demo-web-server-dev.autel.com',
changeO(???)rigin: true,
}??)
)
app.use(
'/sys',
cre??ateProxyMiddleware({
target: 'http://localhost:5001',
changeOrigin: true,
})
);
}

找到 scripts 路徑 打開(kāi) strat.js

在第 117行左(′▽?zhuān)?右 協(xié)商下面代碼：

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

總結

到此這篇關(guān)于react axios 跨域(yu)訪(fǎng)問(wèn)一個(gè)或多個(gè)域名的文章就介紹到這了,更多相關(guān)react axios 跨域內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

來(lái)源：腳本之家

鏈接：https://www.(╯°□°)╯jb51.net/??article/184687.htm