技術共有

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

🔥 个人主页：空白の詩

クロスドメインのリソース共有 (CORS、クロスオリジン リソース共有) の問題は、フロントエンド開発における共通の課題です。この記事では、さまざまな環境 (Vue3 + Vite プロジェクト、jQuery プロジェクト、その他の環境など) でのソリューションを詳しく紹介します。

---

1. CORS エラーの一般的な原因

クロスドメインの問題の本質は、セキュリティ上の理由から、ブラウザがあるソース (ドメイン、プロトコル、ポート) から別のソースへのリソースの読み込みを制限していることです。このセキュリティメカニズムは「同一生成元ポリシー」と呼ばれます。同一生成元ポリシーでは、要求された URL のプロトコル、ドメイン名、ポートが現在の Web ページの URL と同じである場合にのみ、ブラウザーが要求の通過を許可することが規定されています。

1. CORS ヘッダーの欠如：
   サーバーが正しい CORS 応答ヘッダーを設定しなかったため、ブラウザーが要求を拒否しました。たとえば、ブラウザはサーバー応答に次の内容が含まれることを期待します。Access-Control-Allow-Origin このヘッダーが設定されていない場合、ブラウザーはリクエストをブロックします。

2. クロスオリジンリクエストは禁止されています：
   デフォルトでは、ブラウザはユーザーを保護するためにクロスオリジンリクエストをブロックします。サーバーが特定のドメインへのアクセスを許可していない場合、ブラウザは CORS エラーをスローします。

3. プリフライトリクエストが失敗しました：
   一部の複雑なリクエストの場合、ブラウザはプリフライト リクエスト (OPTIONS リクエスト) を送信して、サーバーがリクエストを許可するかどうかを確認します。プリフライト要求が失敗すると、CORS エラーが発生します。

---

2. 解決策

1. ビュー3 + Vite プロジェクトによるソリューション

Vite の開発サーバー プロキシ機能を使用すると、ローカル リクエストを別のサーバーにプロキシして、クロスドメインの問題を回避できます。具体的な手順は次のとおりです。

Vue3 + Vite プロジェクトを作成する

npm create vite@latest
cd your-project-name
npm install
1
2
3

Vue3 テンプレートを選択し、プロジェクト ディレクトリを入力します。

Vite のプロキシを設定する

Vite プロジェクトのルート ディレクトリにありますvite.config.ts（またはvite.config.js) を選択し、次の設定を行います。

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
  server: {
    proxy: {
      '/api': {
        target: 'http://api.example.com', // 目标服务器
        changeOrigin: true, // 是否改变请求源
        rewrite: (path) => path.replace(/^/api/, ''), // 重写路径
      },
    },
  },
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

リクエストを送信する

Vue コンポーネントでは、次のように渡すことができます。axiosまたはfetchリクエストを送信します。例えば：

<template>
  <div>
    <button @click="fetchData">获取数据</button>
    <div v-if="data">{{ data }}</div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import axios from 'axios';

export default defineComponent({
  setup() {
    const data = ref(null);

    const fetchData = async () => {
      try {
        const response = await axios.get('/api/data');
        data.value = response.data;
      } catch (error) {
        console.error('请求错误:', error);
      }
    };

    return {
      data,
      fetchData,
    };
  },
});
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

2. jQueryプロジェクトでのソリューション

jQuery プロジェクトでは、リクエスト ヘッダーを設定するか JSONP を使用することで CORS の問題を解決できます。

CORS リクエスト ヘッダーを使用する

サーバーに次のような正しい CORS ヘッダーが設定されていることを確認してください。 Access-Control-Allow-Origin 。クライアントがリクエストを開始すると、次のようになります。

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $.ajax({
    url: 'http://api.example.com/data',
    method: 'GET',
    success: function(data) {
      console.log(data);
    },
    error: function(xhr, status, error) {
      console.error('请求错误:', error);
    }
  });
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13

JSONPの使用

サーバーが JSONP をサポートしている場合、クロスドメインの問題は次の方法で解決できます。

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $.ajax({
    url: 'http://api.example.com/data',
    method: 'GET',
    dataType: 'jsonp', // 使用JSONP
    success: function(data) {
      console.log(data);
    },
    error: function(xhr, status, error) {
      console.error('请求错误:', error);
    }
  });
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

3. 他の環境でのソリューション

サーバー側プロキシを使用する

多くの場合、サーバー側にプロキシを設定して、サーバー側を介してクロスドメイン要求を転送できます。たとえば、Node.js では次のように使用できます。http-proxy-middleware：

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

app.use('/api', createProxyMiddleware({
  target: 'http://api.example.com',
  changeOrigin: true,
  pathRewrite: {
    '^/api': '',
  },
}));
1
2
3
4
5
6
7
8
9

CORS ヘッダーを設定する

サーバー応答に正しい CORS ヘッダーが含まれていることを確認してください。たとえば、Node.js + Express では次のようになります。

const express = require('express');
const app = express();

app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
  next();
});

app.get('/data', (req, res) => {
  res.json({ message: 'Hello World' });
});

app.listen(3000, () => {
  console.log('Server running on port 3000');
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

Nginxを使用してプロキシを構成する

Nginx では、CORS の問題はプロキシを構成することで解決できます。

server {
    listen 80;
    server_name yourdomain.com;

    location /api/ {
        proxy_pass http://api.example.com/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}
1
2
3
4
5
6
7
8
9
10
11
12

---

3. まとめ

CORS の問題は、フロントエンド開発これは一般的な課題ですが、適切なプロキシ構成とサーバー設定で効果的に解決できます。さまざまな環境で、Vite のプロキシ機能を使用し、リクエスト ヘッダー、JSONP、サーバー側プロキシ、Nginx プロキシなどの設定を使用して、クロスドメインの問題を解決できます。この記事が CORS の問題の理解と解決に役立つことを願っています。