[Ошибка CORS] Проблема междоменного запроса: решения CORS в различных средах

2024-07-12

Вставьте сюда описание изображения

🔥 个人主页：пустое стихотворение

Вставьте сюда описание изображения

Каталог статей

Вставьте сюда описание изображения

Междоменное совместное использование ресурсов Проблемы (CORS, совместное использование ресурсов между источниками) являются распространенной проблемой во внешней разработке. В этой статье будут подробно представлены решения в различных средах (таких как проекты Vue3 + Vite, проекты jQuery и другие среды).

1. Распространенные причины ошибок CORS

Суть междоменной проблемы заключается в том, что браузер ограничивает загрузку ресурсов из одного источника (домена, протокола, порта) в другой источник из соображений безопасности. Этот механизм безопасности называется «политикой одного и того же происхождения». Политика одного и того же происхождения предусматривает, что браузер разрешит прохождение запроса только в том случае, если запрошенный URL-адрес имеет тот же протокол, имя домена и порт, что и URL-адрес текущей веб-страницы.

Отсутствие заголовков CORS：
Сервер не установил правильные заголовки ответа CORS, в результате чего браузер отклонил запрос.Например, браузер ожидает, что ответ сервера будет содержатьAccess-Control-Allow-Origin заголовок, если этот заголовок не установлен, браузер заблокирует запрос.
Запросы из разных источников запрещены.：
По умолчанию браузеры блокируют запросы между источниками для защиты пользователей. Если сервер не разрешает доступ для определенного домена, браузер выдаст ошибку CORS.
Предполетный запрос не выполнен：
Для некоторых сложных запросов браузер отправит предварительный запрос (запрос OPTIONS), чтобы подтвердить, разрешает ли сервер запрос. Если предварительный запрос завершится неудачно, возникнет ошибка CORS.

2. Решение

1. Vue3 + Решения в рамках проекта 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 проблемы CORS можно решить, установив заголовки запросов или используя JSONP.

Используйте заголовки запросов 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.

Обмен технологиями