Express.js GET 请求，无法允许 CORS

Question

I have an express.js server with some cors allow origin code:

var express = require('express');

var app = express();
var router = express.Router();
require('dotenv').config()
const bodyParser = require('body-parser')

const cors = require("cors");
const corsOptions = {
  origin: '*',
  credentials: true,
  optionSuccessStatus: 200,
}

var allowedOrigins = ['http://localhost:4200',
                      'http://yourapp.com'];
app.use(cors({  
  origin: function(origin, callback){
    // allow requests with no origin     
    // (like mobile apps or curl requests)    
    if(!origin) 
      return callback(null, true);    
    if(allowedOrigins.indexOf(origin) === -1){
      var msg = 'The CORS policy for this site does not ' +                
          'allow access from the specified Origin.';      
      return callback(new Error(msg), false);    
    }    
    return callback(null, true);  
  }
}));

router.use(cors(corsOptions))

// router.use(bodyParser.urlencoded({ extended: true }))

// parse application/json
// router.use(bodyParser.json())

router.use(function (req, res, next) {

  // Website you wish to allow to connect
  res.setHeader('Access-Control-Allow-Origin', 'http://localhost:4200');

  // Request methods you wish to allow
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');

  // Request headers you wish to allow
  res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');

  // Set to true if you need the website to include cookies in the requests sent
  // to the API (e.g. in case you use sessions)
  res.setHeader('Access-Control-Allow-Credentials', true);

  // Pass to next layer of middleware
  next();
});

router.use(function (req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});

router.get('/p', function (req, res, next) {
  res.json({msg: 'This is CORS-enabled for all origins!'})
})

I then call a post request. It works!!

this.http.post<any>('http://localhost:3000/stuff', {
      dataToSend: docToStore
    }).subscribe({
      next: async data => {

        console.log('got some data back! ', data);

      },
      error: error => {
 
      }
    })

However, when I try to call any GET request... I get a cors error. wtf??? Can anyone explain this??

this.http.get<any>('http://localhost:3000/p', {
      headers: { 'Content-Type': 'application/x-www-form-urlencoded', 'Access-Control-Allow-Origin': '*' }
    }).subscribe({
      next: async data => {
       
        console.error('ok ', data);

      },
      error: error => {
        
        console.error('There was an error ', error);
      }
    })

I am so completely baffled. This makes literally no sense...

Answer 1

The Access-Control-Allow-* headers do not belong in a GET (or POST) request , they occur in responses . And the unexpected Access-Control-Allow-Origin header is perhaps the reason why your GET request leads to a CORS error.

You have three places in your code that influence CORS:

• app.use(cors(...))
• router.use(cors(...))
• router.use(function(...)) that sets the Access-Control-Allow-* headers directly.

You should use only of these (preferably the first or second).