Cors erro estrito-origem-ao-cruz-de origem simples nodeJS-reactJS projeto

0

Pergunta

Eu estou tentando fazer upload de imagem para Cloundinary, mas ocorreu um erro com o código de status de 500 relacionados com cors que eu tivesse de definir o servidor para permitir que todos de origem.

A mensagem de erro é:

POST http://localhost:5000/my-route-upload 500 (Internal Server Error)

aqui está o meu POST função :

const cloudinaryUpload = (fileToUpload) => {
    return axios.post(API_URL + '/cloudinary-upload', fileToUpload)
    .then(res => console.log(res))
    .catch(err => {
        console.log(err)
        console.log("cannot post")
    }); }

No lado do servidor, que eu tinha adicionado o seguinte bloco de App.JS

const cors = require('cors'); 
var app = express();
app.use(cors({
  origin: "*",
  })
);

Os códigos fez executar, tentei modificar a origem de um específico como http://127.0.0.1:3001 (a minha porta de cliente é de 3000). Logo em seguida veio outra mensagem de erro

De volta para o primeiro erro, no guia de Rede/Headers :

Request URL: http://localhost:5000/cloudinary-upload
Request Method: POST
Status Code: 500 
Referrer Policy: strict-origin-when-cross-origin

Access-Control-Allow-Origin: *

Host: localhost:5000
Origin: http://127.0.0.1:3000

Eu não sei porque não funcionou. Eu uso o criar-reagir-app para o cliente e Expressar o gerador para o servidor

express node.js reactjs
2021-11-24 04:02:31
4
0

Talvez você deve adicionar o cabeçalho de tipo de conteúdo para o seu Axios pedido. Como este.

const res = await axios.post('url', data, {
  headers: {
    'content-type': 'application/json'
  }
});
2021-11-24 04:17:25

ele ainda não funciona const cloudinaryUpload = (fileToUpload) => { return axios.post(API_URL + '/cloudinary-upload', fileToUpload, {headers: { 'content-type': 'application/json' }}) .then(res => res.data) .catch(err => { console.log(err) console.log("cannot post") }); }
Ho Quang Lam

Como está escrito, a sua resposta não é clara. Por favor, editar para adicionar outros detalhes que ajudarão as pessoas a compreender como este aborda a questão colocada. Você pode encontrar mais informações sobre como escrever boas respostas no centro de ajuda.
Community
0

A configuração de um proxy para o servidor de seu cliente

Proxy pode ser um simples "proxy": "http://localhost:5000" no seu pacote.json, onde desconhecido todas as solicitações será intermediado por proxy para localhost:5000 Essencialmente, você precisa chamar a api do cliente como /my-route-upload em vez de http://localhost:5000/my-route-upload.

Mas o método preferido seria adicionar um arquivo chamado src/setupProxy.js e $ npm install http-proxy-middleware --save adicione o seguinte ao arquivo


module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://localhost:5000',
      changeOrigin: true,
    })
  );
};```

Also look at enabling cors in express
https://enable-cors.org/server_expressjs.html
2021-11-24 05:04:57
0
const cors = require('cors'); 
var app = express();
app.use(cors());

tente isso

2021-11-24 07:02:38

Enquanto esse código poderá responder à pergunta, fornecendo um contexto adicional a respeito de como e/ou porque ele resolve o problema seria melhorar a resposta do valor de longo prazo. Você pode encontrar mais informações sobre como escrever boas respostas no centro de ajuda: stackoverflow.com/help/how-to-answer . Boa sorte
nima
0

Este middleware ajuda a evitar cross-plataforma erro

app.use((req, res, next) => {
  res.setHeader("Access-Control-Allow-Origin", "*");
  res.setHeader(
    "Access-Control-Allow-Methods",
    "OPTIONS, GET, POST, PUT, PATCH, DELETE"
  );
  res.setHeader("Access-Control-Allow-Headers", "Content-Type, Authorization");
  next();
});

Definir esse cabeçalho de middleware em seus arquivos raiz acima de todas as rotas na express app, Atualizar este bloco de código com o seu servidor de cors bloco AppJS

2021-11-24 09:08:05

eu ter corrigido isso muito obrigado
Ho Quang Lam

Com este middleware?
Smit Gajera

Eu tinha um erro na validação com Cloudanry. Mas o erro apareceu como veio de cors
Ho Quang Lam

Em outros idiomas

Esta página está em outros idiomas

Русский
..................................................................................................................
Italiano
..................................................................................................................
Polski
..................................................................................................................
Română
..................................................................................................................
한국어
..................................................................................................................
हिन्दी
..................................................................................................................
Français
..................................................................................................................
Türk
..................................................................................................................
Česk
..................................................................................................................
ไทย
..................................................................................................................
中文
..................................................................................................................
Español
..................................................................................................................
Slovenský
..................................................................................................................