Ошибка Cors строгое происхождение-когда-кросс-происхождение простых узлов-проект ReactJS

Question 1

Я пытаюсь загрузить изображение в Cloundinary, но произошла ошибка с кодом состояния 500, относящимся к cors, хотя я настроил сервер на разрешение всех источников.

Сообщение об ошибке выглядит так:

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

вот моя почтовая функция :

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")
    }); }

На стороне сервера я добавил следующий блок в App.JS

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

Эти коды действительно выполнялись, я попытался изменить источник на конкретный, например http://127.0.0.1:3001 (мой клиентский порт 3000). Затем появилось еще одно сообщение об ошибке

Вернемся к первой ошибке на вкладке Сеть/Заголовки :

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

Я не знаю, почему это не сработало. Я использую create-react-приложение для клиента и экспресс-генератор для сервера

Question 2

Возможно, вам следует добавить заголовок типа содержимого в свой запрос Axios. Подобный этому.

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

Question 3

Настройте прокси-сервер для вашего сервера от вашего клиента

Прокси может быть простым "proxy": "http://localhost:5000" в вашем файле package.json, где все неизвестные запросы будут перенаправлены на локальный хост:5000 По сути, вам нужно вызвать api из клиента как /my-route-upload вместо http://localhost:5000/my-route-upload.

Но предпочтительным методом было бы добавить файл с именем src/setupProxy.js и $ npm install http-proxy-middleware --save добавьте это в файл


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

Question 4

const cors = require('cors'); 
var app = express();
app.use(cors());

попробуйте это

Question 5

Это промежуточное программное обеспечение помогает избежать кроссплатформенных ошибок

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();
});

Установите это промежуточное программное обеспечение заголовка в корневом файле над всеми маршрутами в приложении express, обновите этот блок кода с помощью блока cors сервера в AppJS

Willian Mendoza · Answer 1 · 2021-11-24T04:17:25

0

Возможно, вам следует добавить заголовок типа содержимого в свой запрос Axios. Подобный этому.

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

Willian Mendoza

2021-11-24 04:17:25

это все равно не работает

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

Как это написано в настоящее время, ваш ответ неясен. Пожалуйста, отредактируйте, чтобы добавить дополнительные сведения, которые помогут другим понять, как это отвечает на заданный вопрос. Вы можете найти более подробную информацию о том, как писать хорошие ответы, в справочном центре.

Community

Raja Avinash · Answer 2 · 2021-11-24T05:04:57

Настройте прокси-сервер для вашего сервера от вашего клиента

Прокси может быть простым "proxy": "http://localhost:5000" в вашем файле package.json, где все неизвестные запросы будут перенаправлены на локальный хост:5000 По сути, вам нужно вызвать api из клиента как /my-route-upload вместо http://localhost:5000/my-route-upload.

Но предпочтительным методом было бы добавить файл с именем src/setupProxy.js и $ npm install http-proxy-middleware --save добавьте это в файл


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

devCrow · Answer 3 · 2021-11-24T07:02:38

0

const cors = require('cors'); 
var app = express();
app.use(cors());

попробуйте это

devCrow

2021-11-24 07:02:38

Хотя этот код может дать ответ на вопрос, предоставление дополнительного контекста относительно того, как и/или почему он решает проблему, повысит долгосрочную ценность ответа. Вы можете найти более подробную информацию о том, как писать хорошие ответы, в справочном центре: stackoverflow.com/help/how-to-answer . Удачи

nima

Smit Gajera · Answer 4 · 2021-11-24T09:08:05

Это промежуточное программное обеспечение помогает избежать кроссплатформенных ошибок

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();
});

Установите это промежуточное программное обеспечение заголовка в корневом файле над всеми маршрутами в приложении express, обновите этот блок кода с помощью блока cors сервера в AppJS

я все исправил, большое вам спасибо
С помощью этого промежуточного программного обеспечения?
У меня была ошибка при проверке с Cloudanry. Но ошибка выглядела так, как будто она исходила от cors

Ошибка Cors строгое происхождение-когда-кросс-происхождение простых узлов-проект ReactJS

Вопрос

На других языках

Эта страница на других языках

Популярное в этой категории

Популярные вопросы в этой категории