Keystone-classic: Getting error "No 'Access-Control-Allow-Origin' header is present on the requested resource"?

Created on 11 Jan 2017  路  5Comments  路  Source: keystonejs/keystone-classic

my server is running in localhost:3000 and i have created posts now i am trying to access that post data from angular file

i have written like this in controller

myApp.controller('TestCtrl', function ($scope,$http) {

$scope.check = function()
{
$http.get('http://192.168.1.6:3000/keystone/posts/5876221082b5f21e383abba2').success(function(data, response) {
console.log(data);

});

}
});

i am getting error like this

XMLHttpRequest cannot load http://192.168.1.6:3000/keystone/posts/5876221082b5f21e383abba2. Redirect from 'http://192.168.1.6:3000/keystone/posts/5876221082b5f21e383abba2' to 'http://192.168.1.6:3000/keystone/signin?from=/keystone/posts/5876221082b5f21e383abba2' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

help me out to solve this issue

Most helpful comment

Inside your route:

res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");

Why is CORS important?
JavaScript and the web programming has grown by leaps and bounds over the years, but the same-origin policy still remains. This prevents JavaScript from making requests across domain boundaries, and has spawned various hacks for making cross-domain requests.

CORS introduces a standard mechanism that can be used by all browsers for implementing cross-domain requests. The spec defines a set of headers that allow the browser and server to communicate about which requests are (and are not) allowed. CORS continues the spirit of the open web by bringing API access to all.

source: http://enable-cors.org/

All 5 comments

Inside your route:

res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");

Why is CORS important?
JavaScript and the web programming has grown by leaps and bounds over the years, but the same-origin policy still remains. This prevents JavaScript from making requests across domain boundaries, and has spawned various hacks for making cross-domain requests.

CORS introduces a standard mechanism that can be used by all browsers for implementing cross-domain requests. The spec defines a set of headers that allow the browser and server to communicate about which requests are (and are not) allowed. CORS continues the spirit of the open web by bringing API access to all.

source: http://enable-cors.org/

If you're trying to make an AJAX call like $.get(), make sure you use relative paths, not global ones. Here's an example:

Bad:
$.get('http://my.ip.address:3000/api/posts/list', '', function() {...});
The above code will result in a CORS error.

Good:
$.get('/api/posts/list', '', function() {...});
Does the same thing, but does not run afoul of the CORS rules.

@useralive003 I'm closing this from being a keystone issue, as I suspect as @gfrancischelli and @christroutner suggested this is likely a routing issue, not a keystone issue.

If you are still experiencing problems feel free to reach out to em though.

Hi gfrancischelli,
I have one small doubt that the res.header("") should be placed inside the callback function of http? or It should be in the api response?
Kindly help me out..

This error occurs when the client URL and server url doesnt match including port. In this case you need to enable your Service for CORS which is Cross Origin Resource Sharing.
If you are hosting a Spring Rest Service then you can find it here.
https://spring.io/blog/2015/06/08/cors-support-in-spring-framework
If you are hosting a service using node server then

  1. Stop the Node Server.
  2. npm install cors
  3. Add following lines to your server.js
    var cors = require('cors')
    app.use(cors())//use this after the variable declaration
Was this page helpful?
0 / 5 - 0 ratings

Related issues

celiao picture celiao  路  4Comments

ttsirkia picture ttsirkia  路  4Comments

mjmaix picture mjmaix  路  6Comments

calebmcelroy picture calebmcelroy  路  3Comments

stennie picture stennie  路  5Comments