vue4 axiosプロキシクロスドメイン

一般的なクロスドメインソリューション
一般的なフロントエンドクロスドメインソリューション（フル）

vue cli webpack関連

vue cliのdevServer.proxy構成

Axios中国語の説明

新しいファイルvue.config.js

module.exports = {
    
    
  devServer: {
    
    
    proxy: {
    
    
      '/api': {
    
    // 使用"/api"来代替"http://f.apiplus.c"
        // target: 'http://192.168.0.102:8080', // 源地址
        target: 'http://118.178.84.155:5050/api', // 源地址
        changeOrigin: true, // 改变源
        pathRewrite: {
    
    
          '^/api': '' // 路径重写
        }
      }
    }
  }
}

this.$axios.get('/api/4g/status').then((res) => {
    
    
      console.log(res)
    })

分割線

ここでは、eslintsがオンになっているため、赤い波線が破裂し続ける理由に注意する必要があります。フォーマットに問題があります。

長時間検索した後、スペースの問題であることがわかりました。スペースが2つだけ残っており、タブキーは4つです。

もともとクロスドメインの問題を解決してくれた弟の王に特に感謝しています

この

サーバーのアドレスはローカルアドレスとは異なり、ブラウザの保護戦略は別のソースからアクセスすることはできません。同じ発生源
などについては説明しません
。問題の発生プロセスと解決方法を記録するだけです。

Baiduは、vueがクロスドメインをどのように解決するかなどについて多くを学びましたが、見つかった答えはあなたが望む答えではありません

フロントサイドに尋ねたところ、適切な回答が得られませんでした。最後に、Wangとパワフルな
彼がリンクを投げ
て、グローバル検索プロキシ
検索devServerを作成してから、公式Webサイトを探しに行っ
た場所で対応する構成を見つけました。
最初の2つの公式
ウェブサイトは後で修正しましたが、難しくはありません。

とにかく、私は幸せで、他のことをしに行きました。