[Erro CORS] Problema de solicitação entre domínios: soluções CORS em vários ambientes

2024-07-12

Insira a descrição da imagem aqui

🔥 个人主页：poema em branco

Insira a descrição da imagem aqui

Diretório de artigos

Insira a descrição da imagem aqui

Compartilhamento de recursos entre domínios Os problemas (CORS, Cross-Origin Resource Sharing) são um desafio comum no desenvolvimento front-end. Este artigo apresentará detalhadamente soluções em diferentes ambientes (como projetos Vue3 + Vite, projetos jQuery e outros ambientes).

1. Causas comuns de erros CORS

A essência do problema de domínio cruzado é que o navegador restringe o carregamento de recursos de uma fonte (domínio, protocolo, porta) para outra fonte por razões de segurança. Este mecanismo de segurança é denominado “política de mesma origem”. A política de mesma origem estipula que o navegador permitirá a passagem da solicitação somente se o URL solicitado tiver o mesmo protocolo, nome de domínio e porta que o URL da página da web atual.

Falta de cabeçalhos CORS：
O servidor não definiu os cabeçalhos de resposta CORS corretos, fazendo com que o navegador rejeitasse a solicitação.Por exemplo, o navegador espera que a resposta do servidor contenhaAccess-Control-Allow-Origin cabeçalho, se este cabeçalho não estiver definido, o navegador bloqueará a solicitação.
Solicitações de origem cruzada são proibidas：
Por padrão, os navegadores bloqueiam solicitações de origem cruzada para proteger a segurança dos usuários. Se o servidor não permitir acesso a um domínio específico, o navegador gerará um erro CORS.
Falha na solicitação de simulação：
Para algumas solicitações complexas, o navegador enviará uma solicitação de comprovação (solicitação OPTIONS) para confirmar se o servidor permite a solicitação. Se a solicitação de simulação falhar, ocorrerá um erro de CORS.

2. Solução

1. Vue3 + Soluções no âmbito do projeto Vite

Por meio da função de proxy do servidor de desenvolvimento do Vite, as solicitações locais podem ser enviadas por proxy para diferentes servidores para evitar problemas entre domínios. Aqui estão as etapas específicas:

Criar projeto Vue3 + Vite

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

Selecione o modelo Vue3 e entre no diretório do projeto.

Configurar o proxy do Vite

Encontrado no diretório raiz do projeto Vitevite.config.ts(ouvite.config.js) e faça a seguinte configuração:

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 pedido

No componente Vue, você pode passaraxiosoufetch enviar pedido. Por exemplo:

<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. Soluções no projeto jQuery

Em projetos jQuery, os problemas de CORS podem ser resolvidos definindo cabeçalhos de solicitação ou usando JSONP.

Use cabeçalhos de solicitação CORS

Certifique-se de que o servidor tenha os cabeçalhos CORS corretos definidos, como Access-Control-Allow-Origin . Quando o cliente inicia uma solicitação:

<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

Se o servidor suportar JSONP, os problemas entre domínios poderão ser resolvidos das seguintes maneiras:

<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. Soluções em outros ambientes

Use proxies do lado do servidor

Em muitos casos, um proxy pode ser configurado no lado do servidor para encaminhar solicitações entre domínios através do lado do servidor.Por exemplo, em Node.js você pode 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

Definir cabeçalhos CORS

Certifique-se de que os cabeçalhos CORS corretos estejam incluídos na resposta do servidor. Por exemplo, em 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

No Nginx, os problemas de CORS podem ser resolvidos configurando o 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. Resumo

O problema do CORS éDesenvolvimento front-end Um desafio comum, mas que pode ser resolvido de forma eficaz com configuração de proxy e configurações de servidor adequadas. Em diferentes ambientes, você pode usar a função de proxy do Vite, definir cabeçalhos de solicitação, JSONP, proxy do lado do servidor, proxy Nginx e outros métodos para resolver problemas entre domínios. Espero que este artigo ajude você a entender e resolver problemas de CORS.

Compartilhamento de tecnologia