クロスドメインのフロントエンドソリューション ------ リバースプロキシ

1. Vue プロジェクトでリバースプロキシを使用してクロスドメインの問題を解決するには、Vue の開発サーバー (webpack-dev-server) を構成します。具体的な手順は次のとおりです。

注: この構成は開発環境でのみ有効です。運用環境では、バックエンドサーバーで関連する構成を構成するなど、他の方法を使用してクロスドメインの問題を解決する必要があります。

フロントエンドコード/apiでという、Vue 開発サーバーはリクエストをターゲットサーバーに転送し、応答結果をフロントエンドに返すため、クロスドメインの問題が解決されます。

たとえば、/api/userインターフェイスにアクセスしたい場合、フロントエンドコードでを使用すると、/api/userクロスドメインの制限を気にせずにリクエストを開始できます。

2. Node.js でミドルウェアプロキシを使用してクロスドメインの問題を解決するhttp-proxy-middlewareこのライブラリを使用すると、これを実現できます。

Vue プロジェクトのルートディレクトリにあるファイルを開きます vue.config.js (存在しない場合は新しいファイルを作成します)。

次のコードをファイルに追加して、リバースプロキシを構成します。

module.exports = {
  devServer: {
    proxy: {
      '/api': { // 这里的 '/api' 是你希望通过代理访问的请求前缀，可以根据实际情况进行修改
        target: 'http://目标服务器的域名或IP地址', // 设置目标服务器的地址，即要跨域访问的后端接口地址
        changeOrigin: true, // 将主机标头的原点改为目标URL
        pathRewrite: {
          '^/api': '' // 去掉请求前缀，例如将 '/api/user' 转为 '/user'
        }
      }
    }
  }
};

上記のコードをhttp://目标服务器的域名或IP地址実際のターゲットサーバーのアドレスに置き換えてください。

vue.config.js ファイルを保存します。
Vue 開発サーバーを再起動します。

まず、Node.js プロジェクトで npm または Yarn を使用してライブラリをインストールしますhttp-proxy-middleware。

npm install http-proxy-middleware

Node.js プロジェクトにミドルウェアファイル (例: proxyMiddleware.js) を作成し、次のコードを追加します。

const { createProxyMiddleware } = require('http-proxy-middleware');

const proxyMiddleware = createProxyMiddleware({
  target: 'http://目标服务器的域名或IP地址', // 设置目标服务器的地址，即要跨域访问的后端接口地址
  changeOrigin: true, // 将主机标头的原点改为目标URL
});

module.exports = proxyMiddleware;

上記のコードをhttp://目标服务器的域名或IP地址実際のターゲットサーバーのアドレスに置き換えてください。

次に、メインアプリケーションファイル (例: app.js) でこのミドルウェアを使用します。

const express = require('express');
const proxyMiddleware = require('./proxyMiddleware');

const app = express();

// 其他中间件和路由设置...

// 使用代理中间件来处理跨域请求
app.use('/api', proxyMiddleware);

// 其他路由设置...

// 启动服务器
app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

上記のコードを、/apiプロキシに使用するリクエストプレフィックスに置き換えてください。

ファイルを保存し、Node.js サーバーを起動します。フロントエンドコードにプレフィックス /api を、Node.js サーバーはリクエストをターゲットサーバーに転送し、応答結果をフロントエンドに返します。これにより、クロスドメインの問題が解決されます。
注: この方法は Node.js サーバー側でのみ機能し、開発環境および運用環境に適しています。ただし、運用環境では適切なセキュリティと権限の制御を構成するように注意してください。

クロスドメインのフロントエンド ソリューション ------ リバース プロキシ

おすすめ

クロスドメインのフロントエンドソリューション ------ リバースプロキシ