[Error de CORS] Problema de solicitud entre dominios: soluciones CORS en varios entornos

2024-07-12

Insertar descripción de la imagen aquí

🔥 个人主页：poema en blanco

Insertar descripción de la imagen aquí

Directorio de artículos

Insertar descripción de la imagen aquí

Intercambio de recursos entre dominios (CORS, intercambio de recursos entre orígenes) son un desafío común en el desarrollo front-end. Este artículo presentará en detalle soluciones en diferentes entornos (como proyectos Vue3 + Vite, proyectos jQuery y otros entornos).

1. Causas comunes de errores CORS

La esencia del problema entre dominios es que el navegador restringe la carga de recursos de una fuente (dominio, protocolo, puerto) a otra fuente por razones de seguridad. Este mecanismo de seguridad se denomina "política del mismo origen". La misma política de origen estipula que el navegador permitirá que la solicitud pase solo si la URL solicitada tiene el mismo protocolo, nombre de dominio y puerto que la URL de la página web actual.

Falta de encabezados CORS：
El servidor no configuró los encabezados de respuesta CORS correctos, lo que provocó que el navegador rechazara la solicitud.Por ejemplo, el navegador espera que la respuesta del servidor contengaAccess-Control-Allow-Origin encabezado, si este encabezado no está configurado, el navegador bloqueará la solicitud.
Las solicitudes de origen cruzado están prohibidas：
De forma predeterminada, los navegadores bloquean las solicitudes de origen cruzado para proteger la seguridad de los usuarios. Si el servidor no permite el acceso a un dominio específico, el navegador arrojará un error CORS.
Error en la solicitud de verificación previa：
Para algunas solicitudes complejas, el navegador enviará una solicitud de verificación previa (solicitud de OPCIONES) para confirmar si el servidor permite la solicitud. Si la solicitud de verificación previa falla, se producirá un error CORS.

2. Solución

1. Vue3 + Soluciones bajo el proyecto Vite

A través de la función de proxy del servidor de desarrollo de Vite, las solicitudes locales se pueden enviar a diferentes servidores para evitar problemas entre dominios. Estos son los pasos específicos:

Crear proyecto Vue3 + Vite

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

Seleccione la plantilla Vue3 e ingrese al directorio del proyecto.

Configurar el proxy de Vite

Encontrado en el directorio raíz del proyecto Vite.vite.config.ts(ovite.config.js), y realice la siguiente configuración:

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

Enviar petición

En el componente Vue, puedes pasaraxiosofetch Enviar petición. Por ejemplo:

<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. Soluciones bajo el proyecto jQuery.

En proyectos jQuery, los problemas de CORS se pueden resolver configurando encabezados de solicitud o usando JSONP.

Utilice encabezados de solicitud CORS

Asegúrese de que el servidor tenga configurados los encabezados CORS correctos, como Access-Control-Allow-Origin . Cuando el cliente inicia una solicitud:

<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

Usando JSONP

Si el servidor admite JSONP, los problemas entre dominios se pueden resolver de las siguientes maneras:

<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. Soluciones en otros entornos

Utilice proxies del lado del servidor

En muchos casos, se puede configurar un proxy en el lado del servidor para reenviar solicitudes entre dominios a través del lado del servidor.Por ejemplo, en Node.js puedes usarhttp-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

Establecer encabezados CORS

Asegúrese de que se incluyan los encabezados CORS correctos en la respuesta del servidor. Por ejemplo, en 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

Configurar proxy usando Nginx

En Nginx, los problemas de CORS se pueden resolver configurando el proxy:

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. Resumen

El problema de CORS esDesarrollo front-end Un desafío común, pero que se puede resolver de manera efectiva con la configuración adecuada del proxy y del servidor. En diferentes entornos, puede utilizar la función de proxy de Vite, configurar encabezados de solicitud, JSONP, proxy del lado del servidor, proxy Nginx y otros métodos para resolver problemas entre dominios. Espero que este artículo le ayude a comprender y resolver los problemas de CORS.

Compartir tecnología