Cors error strict-origin-when-cross-origin simple nodeJS-reactJS project

Question 1

I'm trying to upload image to Cloundinary, but an error occurred with status code 500 relating to cors though i had set the server to allow all origin.

The error message is:

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

here is my POST function :

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

In server side, I had added the following block in App.JS

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

Those codes did execute, i tried modify the origin to the specific one like http://127.0.0.1:3001 (my client port is 3000). Then it came out another error message

Back to the first error, in tab Network/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

I don't know why it didn't work. I use create-react-app for client and Express generator for server

Question 2

Maybe you should add the content-type header to your Axios request. Like this.

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

Question 3

Setup a proxy for your server from your client

Proxy can be a simple "proxy": "http://localhost:5000" in your package.json, where all unknown requests will be proxied to localhost:5000 Essentially you need to call the api from client as /my-route-upload instead of http://localhost:5000/my-route-upload.

But preferred method would be to add a file called src/setupProxy.js and $ npm install http-proxy-middleware --save add this to the file


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

try this

Question 5

This middleware helps to avoid cross-platform error

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

Set this header middleware on your root file above your all routes in the express app, Update this code block with your server cors block in AppJS

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

0

Maybe you should add the content-type header to your Axios request. Like this.

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

Willian Mendoza

2021-11-24 04:17:25

it still doesn't work

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

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

Community

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

Setup a proxy for your server from your client

Proxy can be a simple "proxy": "http://localhost:5000" in your package.json, where all unknown requests will be proxied to localhost:5000 Essentially you need to call the api from client as /my-route-upload instead of http://localhost:5000/my-route-upload.

But preferred method would be to add a file called src/setupProxy.js and $ npm install http-proxy-middleware --save add this to the file


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

try this

devCrow

2021-11-24 07:02:38

While this code may answer the question, providing additional context regarding how and/or why it solves the problem would improve the answer's long-term value. You can find more information on how to write good answers in the help center: stackoverflow.com/help/how-to-answer . Good luck

nima

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

This middleware helps to avoid cross-platform error

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

Set this header middleware on your root file above your all routes in the express app, Update this code block with your server cors block in AppJS

I had a mistake in validation with Cloudanry. But the error appeared like it came from cors

Cors error strict-origin-when-cross-origin simple nodeJS-reactJS project

In other languages

This page is in other languages

Popular in the category