Twitter API Question posted in
The official Twitter API documentation can be found here.

No 'Access-Control-Allow-Origin' header is present when using Angular – Twitter API

I am trying to oauth to twitter using angular -> node -> twitter but i keep getting the error No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access when adding angular to the mix. My app configuration..

  • Angular UI running on port 4200
  • Express Node Server running on port 3000
  • CORS on server is set to Allow-Access-Origin localhost:4200 for Angular to Node
    api calls.

Using express templates that call call express routes works fine as shown below

template -> localhost:3000/auth/twitter

Response Headers
    Access-Control-Allow-Credentials:true
    Access-Control-Allow-Origin:http://localhost:4200
    Location:https://api.twitter.com/oauth/authenticate?oauth_token=placeholdertokenstackoverflow
    Vary:Origin

Request Headers
    Host:localhost:3000
    Referer:http://localhost:3000/

localhost:3000/auth/twitter -> //api.twitter.com/oauth/…

GENERAL
    Request URL:https://api.twitter.com/oauth/authenticate?oauth_token=placeholdertokenstackoverflow
    Request Method:GET
    Status Code:200 

Request Headers
    :authority:api.twitter.com
    :method:GET
    :scheme:https
    referer:http://localhost:3000/

When using angular to call express routes instead of templates, causes what i assume is a CORS error as shown below

angular.http.get -> localhost:3000/auth/twitter

RESPONSE HEADERS
    Access-Control-Allow-Credentials:true
    Access-Control-Allow-Origin:http://localhost:4200
    Location:https://api.twitter.com/oauth/authenticate?oauth_token=placeholdertokenstackoverflow
    Vary:Origin

REQUEST HEADERS
    Host:localhost:3000
    Origin:http://localhost:4200
    Referer:http://localhost:4200/

localhost:3000/auth/twitter -> //api.twitter.com/oauth/…

GENERAL
    Request URL:https://api.twitter.com/oauth/authenticate?oauth_token=placeholdertokenstackoverflow
    Request Method:GET
    Status Code:200 

REQUEST HEADERS
    :authority:api.twitter.com
    :method:GET
    :scheme:https
    ***origin:null
    referer:http://localhost:4200/***

Looking above origin:null appears when angular calls the express route. Even though express server is set up the same in both instances and makes the call to twitter, the headers are different which i dont understand. Does angular setting the view instead of express make the browser confused on the origin of the request?

Tags:

2

Answers


  1. 0

    Modify the node server to add the header Access-Control-Allow-Origin: * to enable cross-origin requests from anywhere (or specify a domain instead of *). This should solve your problem.
    Here is how I solved my issue:

    const app = express()
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();
});
    Login or Signup to reply.
  2. 0

    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')
})
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search