Axios - 无“访问控制允许来源” - CORS

Question

I'm building a javascript app which uses an external API. To get the data, I use axios, but whenever I make a request it returns a CORS error - "No Access-Control-Allow-Origin header set". Now, a temporary solution is to add a third part proxy in front of the API URL (for example https://cors-anywhere.herokuapp.com ), and it works just fine, but I don't really want to depend on a third part server and would like to handle it inside my own app.

I've tried pretty much everything and still can't get it to work. I've used axios response interceptors to attach required headers to the response, but it just doesn't work.

axios.interceptors.response.use(res => {
  res.headers['Access-Control-Allow-Origin'] = '*';
  res.headers['Access-Control-Allow-Credentials'] = 'true'
  res.headers['Access-Control-Request-Method'] = 'POST'
  return res;
})

my server.js file looks something like this

const serveStatic = require('serve-static')
const path = require('path')
const cors = require('cors');

const app = express()

app.use('/', serveStatic(path.join(__dirname, '/dist')))
app.use(cors());

const port = process.env.PORT || 8080
app.listen(port, () => console.log("starting on port 8080"));

Any solutions on this problem?

Answer 1

Try to invert the two lines:

app.use(cors());
app.use('/', serveStatic(path.join(__dirname, '/dist')));

Tell me if it works

By the way your interceptors is useless, you can remove it:

axios.interceptors.response.use(...