CORS http requests in a angular service

Question

so i was wondering is it possible to send cross-domain requests in an angular services? because i have service but when i send a rquest i get the following error:

so i check the request itself :

and no cors has been enabled, then i tried adding it to the backend because that i an answer that comes up a lot but it still didnt help. so here is my code :

this.http.get("https://www.linkedin.com/oauth/v2/accessToken?grant_type=client_credentials&client_id=[ID]&client_secret=[SECRET]").subscribe((data:any) => console.log(data));

i was wondering can you add an header to the get request ? if any more details are necessary just write a comment and i will edited in here.

EDIT:
my back-end

var app = express();
app.use((req, res, next) => {
  res.append('Access-Control-Allow-Origin', ['*']);
  res.append('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
  res.append('Access-Control-Allow-Headers', 'Content-Type');
  next();
});
var mongoose = require('mongoose');
mongoose.connect('MONGO_URL', {  useNewUrlParser: true, promiseLibrary: require('bluebird') })
  .then(() =>  console.log('connection successful'))
  .catch((err) => console.error(err));

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(express.static(path.join(__dirname, 'dist/OMRT')));
app.use('/', express.static(path.join(__dirname, 'dist/OMRT')));
app.use('/dashboard', express.static(path.join(__dirname, 'dist/OMRT')));
app.use('/api', apiRouter);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  next(createError(404));
});

// 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.sendStatus(err.status);
});

module.exports = app;

i use express/node.js backend and the above snippet i used to add an header to allow the origin. i added my localhost because of the error.

redirect-URLS:

so i should send the request from a javascript file, and let a angular service control this file ? because i have to get my data somehow in the database. — Lars Hendriks, Oct 03 '18 at 07:25

score 0 · Accepted Answer · answered Oct 03 '18 at 07:33

0

It's not up to you to add Access-Control-Allow-Origin it in the header, it's up to LinkedIn. So I have no idea why people tell you to change your backend headers.. If adding Origin to your angular request doesn't help, it means LinkedIn has blocked your origin url (localhost) or simply hasn't implemented CORS. In that case, your backend will have to do the request, so you have to add a new endpoint to your backend and let it do the request to LinkedIn. Take a look at this: HTTP GET Request in Node.js Express

answered Oct 03 '18 at 07:33

ShamPooSham

2,301
2
19
28

this worked for me. but is this good practice for a angular application ? – Lars Hendriks Oct 03 '18 at 08:11
Glad to hear! If you don't have control over the API you try to reach, there isn't any other option. And I think that for OAuth, this is the correct practice. The backend should get the access tokens. – ShamPooSham Oct 03 '18 at 08:20
im honest to god thankful but also triggerd at the same time. that i have to find out via stackoverflow that linkedin does not support CORS. – Lars Hendriks Oct 03 '18 at 08:22
I don't know if it's common practice to support CORS for OAuth. I don't know enough about OAuth to be certain, but there might be security issues with letting the front-end doing everything. I'm sure they support CORS for other APIs that aren't security-related. – ShamPooSham Oct 03 '18 at 08:24
and i was questioning if it was common practice because of the downvote you got. i also found it weird you got that. – Lars Hendriks Oct 03 '18 at 08:29

score -2 · Answer 2 · answered Oct 03 '18 at 07:02

-2

Cross-Origin Request Sharing(CORS) Request

Read this

https://www.linkedin.com/pulse/cross-origin-request-sharingcors-ashok-koritala

add header

header("Access-Control-Allow-Origin", "*");

answered Oct 03 '18 at 07:02

Gowthaman D

574
7
19

where should i add this. please give a little more explaination this is really little to work with. you miss a lot of context. – Lars Hendriks Oct 03 '18 at 07:06
Isn't it up to linkedIn to add this in their backend? What @LarsHendriks has to do is to add a `Origin` header, and hope that linkedIn accepts it. – ShamPooSham Oct 03 '18 at 07:16
well there are a couple of stackoverflow topics that suggest it works. like https://stackoverflow.com/questions/52179560/hitting-the-http-get-request-for-linkedin-giving-error-in-angular-2 but i don't get why i does not work for me tho. – Lars Hendriks Oct 03 '18 at 07:19
@ShamPooSham if i am correct i allready add it in the back-end but the request just wont add in the request for some reason. – Lars Hendriks Oct 03 '18 at 07:22
@LarsHendriks The biggest difference between the linked example and yours is that you're trying to use `client_credentials` instead of `code`. – Kirk Larkin Oct 03 '18 at 07:33
@LarsHendriks You added it to the origin backend, not the backend you're calling (linkedIn). This will have no effect. Take a look at my other answer. – ShamPooSham Oct 03 '18 at 07:35
well what i am calling 'Linkedin' is the linkedin server from www.linkedin.com. im trying to setup client credential grant oauth 2.0. so i am trying to do cross-domain requests. – Lars Hendriks Oct 03 '18 at 07:44
@KirkLarkin i just followed this guide : https://developer.linkedin.com/docs/v2/oauth2-client-credentials-flow – Lars Hendriks Oct 03 '18 at 07:44
Yeah, I know it's the linkedIn server. What I'm saying is that if they don't accept your request there isn't much to do about it on the client side. The reason they don't accept it is probably because you're not supposed to do these calls from a browser, your backend is supposed to do the calls to linkedin oauth. – ShamPooSham Oct 03 '18 at 07:48

score -2 · Answer 3 · answered Oct 03 '18 at 07:08

-2

add cors in the backend like this

app.use((req, res, next) => {
    res.append('Access-Control-Allow-Origin', ['*']);
    res.append('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
    res.append('Access-Control-Allow-Headers', 'Content-Type');
    next();
});

answered Oct 03 '18 at 07:08

Exterminator

1,221
7
14

also, you can add cors package [Cors](https://github.com/expressjs/cors) using this – Exterminator Oct 03 '18 at 07:09
2

How is his API's backend related to LinkedIn's `Access-Control-Allow-Origin`? It is LinkedIn which is not allowing requesty from his front-end – Ashish Ranjan Oct 03 '18 at 07:10
this didnt do anything for me.. i will edit some more of my backend in so you can see where i should place it in my back-end. – Lars Hendriks Oct 03 '18 at 07:11
after adding this did you try restarting your server? – Exterminator Oct 03 '18 at 07:41
i did. but it does nothing. keep in mind i am trying to cross-domain requests. to the server my request is going to is not mine. – Lars Hendriks Oct 03 '18 at 07:45
add cors package in nodejs using the step provided in the comments – Exterminator Oct 03 '18 at 07:47
does not work for me either. – Lars Hendriks Oct 03 '18 at 07:59

CORS http requests in a angular service

3 Answers3