Angular 6 - No 'Access-Control-Allow-Origin' header is present on the requested resource

问题:

I have an Angular 6 project, which has a service with is pointing to a server.js

Angular is on port: 4200 and Server.js is on port: 3000. 

When I point the service to http://localhost:3000/api/posts (Server.js location), I'm getting this error:

Failed to load http://localhost:3000/api/posts: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access. 

Here is the server.js code:

// Get dependencies const express = require('express'); const path = require('path'); const http = require('http'); const bodyParser = require('body-parser');  // Get our API routes const api = require('./server/routes/api');  const app = express();  // Parsers for POST data app.use(bodyParser.json()); app.use(bodyParser.urlencoded({ extended: false }));  // Point static path to dist app.use(express.static(path.join(__dirname, 'dist')));  // Set our api routes app.use('/api', api);  // Catch all other routes and return the index file app.get('*', (req, res) => {   res.sendFile(path.join(__dirname, 'dist/myproject/index.html')); });  /**  * Get port from environment and store in Express.  */ const port = process.env.PORT || '3000'; app.set('port', port);  /**  * Create HTTP server.  */ const server = http.createServer(app);  /**  * Listen on provided port, on all network interfaces.  */ server.listen(port, () => console.log(`API running on localhost:${port}`)); 

My question is:

How to I get server.js to allow this call?

回答1:

If you are using Express, you can try this cors package.  EDIT:  var express = require('express') var cors = require('cors') var app = express()  app.use(cors())  app.get('/products/:id', function (req, res, next) {   res.json({msg: 'This is CORS-enabled for all origins!'}) }) app.listen(80, function () {   console.log('CORS-enabled web server listening on port 80') }) 

回答2:

Great! you need to enable domain CORS that can make requests! You can try that

app.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(); }); "Access-Control-Allow-Origin", "*" -> used to accept all domains 

Or you can just set localhost:4200 or something like that

Try that and tell me if worked! Thanks! Hope this helps!

回答3:

Since you are using express, you could create a middleware and use it to redirect all your endpoints. Here is a working snippet of the same:

.... app.use((req,res,next) => {       res.header("Access-Control-Allow-Origin","*");      res.header("Access-Control-Allow-Methods", "POST, GET");      res.header("Access-Control-Allow-Header","Origin, X-Requested-With, Content-Type, Accept");      next();  }) ... 

Place it before you are setting your routes and you should be good.

Check out: https://github.com/ronnielivingsince1994/phoenix/blob/master/messageboard/backend/server.js for understanding usage of middlewares in routing endpoints using express.js.

文章来源: Angular 6 - No 'Access-Control-Allow-Origin' header is present on the requested resource