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

angular 9
angular 6 release date
angular material
angular 6 notes
angular 9 release date
angular 8 release date
install angular 6
angular 7 release date

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?

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')
})

Angular versioning and releases, The version number is incremented based on the level of change included in the Angular versions ^4.0.0, ^5.0.0 and ^6.0.0 are no longer under support. Angular 6 StaticInjectorError: No provider for Options. Ask Question Asked 1 year, 10 months ago. Active 5 months ago. Viewed 39k times 8. 1. I have recently updated

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!

DecimalPipe, {minFractionDigits}-{maxFractionDigits} . minIntegerDigits : The minimum number of integer digits before the decimal point. Default is 1 . minFractionDigits : The  Angular is a platform for building mobile and desktop web applications. Join the community of millions of developers who build compelling user interfaces with Angular.

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.

Pipes, A pipe can accept any number of optional parameters to fine-tune its output. To add It's not much fun updating the template to test the custom pipe. Upgrade  Angular is a very powerful framework for building web apps. It’s been out there for a long time and has proven itself for small, simple apps and large, complex ones alike—Angular 6 is no exception here. Going forward, Angular plans to keep improving and following new web paradigms such as web components (Angular Elements).

How To Build A News Application With Angular 6 And Material Design, No JavaScript framework is better than another. It's all about what your project needs. The same goes for programming languages. Now, I'm not  In this video we are going to learn about how to create angular application from scratch without using angular cli. If you are at beginner level and I remommand you please first learn angular

Building A PWA Using Angular 6, Allow users to “keep” apps they find most useful on their home screen without the hassle of an app store. Linkable Easily share via URL and not  Angular 6 Http Get Example Tutorial From Scratch. Most modern front-end applications communicate with backend services over the HTTP protocol. They communicate via an API. The HttpClient in @angular/common/http offers a simplified client HTTP API for Angular applications that rests on the XMLHttpRequest interface.

Material, Firebase, and Angular 6 Tutorial, If you are not familiar with the project folder structure of Angular, the most important thing you need to know is that all the code related to the app goes inside the src  Angular 6 User Registration and Login Example. Contribute to cornflourblue/angular-6-registration-login-example development by creating an account on GitHub.

Comments
  • This answer maybe useful: stackoverflow.com/a/58064366/7059557
  • try this app.use(cors()); var port = process.env.PORT || 9090; app.get('/', function(req, res) { res.send('Hello!'); }); app.listen(port); console.log('Server started.');
  • I added this to my server.js code and restarted it but still the same error. I don't need to add the last line right?
  • Right! Sorry, last line just for explain! But didn't working? =(
  • Try that! stackoverflow.com/questions/18310394/…
  • @PaulB You added this code at first after const app = express(); ?
  • Still same error and when I change server.js to port 4200 (same as angular) I get error: Uncaught SyntaxError: Unexpected token <
  • Here is a better solution though: github.com/jeromeetienne/AR.js/issues/…