Express服务器和Axios CORS Preflight响应不成功

Question

I have the following get action using react.js ( running on port 3000)

var config = {
  headers: {
    'Access-Control-Allow-Origin': '*',
    'Access-Control-Allow-Headers': 'Origin, X-Requested-With, Content-Type, Accept',
    // 'Accept': 'application/json',
    // 'Content-Type': 'application/json',
  }
};
axios.get(api_url + '/schools/countries/' + country, config)
  .catch(err => {
    alert('There was an error trying to fetch', country)
  })
  .then(response => {
    .....

}

And I'm using a proxy to send that to an express server running on port 3001. The App.js file in the express server is the following:

var express = require('express');
var app = express();
var cors = require('cors')
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
//app.use(logger('dev'));

// app.use(function(req, res, next) {
//   res.header("Access-Control-Allow-Origin", "*");
//   res.header("Access-Control-Allow-Methods", "GET,HEAD,OPTIONS,POST,PUT");
//   res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Authorization");
//   next();
// });

app.all('*', function(req, res, next) {
  res.header('Access-Control-Allow-Origin', 'URLs to trust of allow');
  res.header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
  res.header('Access-Control-Allow-Headers', 'Content-Type');
  if ('OPTIONS' == req.method) {
    res.sendStatus(200);
  } else {
    next();
  }
});


//app.use(cors())
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
  extended: false
}));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', index);
app.use('/users', users);
app.use('/schools', schools);

console.log("IN APP.JS");
// catch 404 and forward to error handler
app.use(function(req, res, next) {
  var err = new Error('Not Found');
  err.status = 404;
  next(err);
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

And for some reason I get the following errors:

[Error] Failed to load resource: Preflight response is not successful (MR, line 0)

[Error] XMLHttpRequest cannot load http://localhost:3000/schools/countries/MR . Preflight response is not successful

In the react side (front-end) I have this is the package.json file:

"proxy": "http://localhost:3001",

I've tried using different headers in the App.js file and I have tried using the cors library to make this work etc. How can I fix this error ?

Thanks!

Answer 1

I found the solution. The problem what 1. I did have to remove the headers from the front end. The second and probably most important thing is that when you're making a axios call using a proxy You should do not this:

var api_url= "http:localhost" axios.get(api_url + '/schools/countries/' + country)

You should do this:

axios.get('/schools/countries/' + country)

without the localhost part.