React 構成クロスドメイン

序文

ここではクロスドメインとは何かについてはあまり触れませんが、主に
Vue のクロスドメインの構成方法についての推奨記事です。

ステップ

package.json (最初の方法)

"proxy": "http://localhost:4000",//目标地址 

短所: 一度しか書けない、柔軟性に欠ける

setupProxy.js (2 番目の方法)

src ディレクトリに新しい setupProxy ファイルを作成します (CommonJs 構文を使用)

// 引入中间件
const proxy = require('http-proxy-middleware')
module.exports = function (app) {
    
    
    app.use(
        proxy('/api', {
    
    
            target: 'http://localhost:5000',  // 目标地址
            changeOrigin: true,    // 允许跨域
            pathReWrite: {
    
    '^/api': ''}   // 正则匹配字段，路径重写
        })
    )
}

複数のドメインを構成する

const proxy = require('http-proxy-middleware')
module.exports = function (app) {
    
    
    app.use(
        proxy('/api', {
    
    
            target: 'http://localhost:5000',
            changeOrigin: true,
            pathReWrite: {
    
    '^/api': ''}
        }),
        proxy('/api', {
    
    
            target: 'http://localhost:8000',
            changeOrigin: true,
            pathReWrite: {
    
    '^/api': ''}
        })
    )
}