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

왜 그것은 작동하지 않았다. 내가 사용하여 만들기-반응-응용 프로그램을 위한 클라이언트와 익스프레스 발전기 위한 서버

Question 2

어쩌면 당신은 추가해야 하는 content-type 헤더를 당신의 날개로 연기 드리프트 같이하지만 요청을 합니다. 이와 같습니다.

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

Question 3

설치에 대한 프록시 서버 클라이언트에서

프록시할 수 있는 간단한 "proxy": "http://localhost:5000" 에 있습니다.json 모든 알 수 없는 요청을 프록시됩니다 localhost: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();
});

이 헤더를 설정하는 미들웨어의 루트 파일상의 모든 경로에 익스프레스 응용 프로그램,업데이트 코드 블록과 함께 서버 cors 블록에서 AppJS

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

0

어쩌면 당신은 추가해야 하는 content-type 헤더를 당신의 날개로 연기 드리프트 같이하지만 요청을 합니다. 이와 같습니다.

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" 에 있습니다.json 모든 알 수 없는 요청을 프록시됩니다 localhost: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();
});

이 헤더를 설정하는 미들웨어의 루트 파일상의 모든 경로에 익스프레스 응용 프로그램,업데이트 코드 블록과 함께 서버 cors 블록에서 AppJS

나는 실수를 검증 Cloudanry. 그러나 오류가 나타난 그것을 좋아에서 온 cors

Cors 오류가 엄격한 출처 때 십자가 원산지 간단 및 라이브러리-reactJS 프로젝트

질문

다른 언어로

이 페이지는 다른 언어로되어 있습니다

이 카테고리에서 인기

인기 있는 질문에 이 카테고리