Error!Status: undefined Origin is not allowed by Access-Control-Allow-Origin.

[dzogchen]

I have angular-yii set up on vanilla MAMP Pro on my dev machine.

I can run the tests successfully, at http://angular-michael/ng-yii/test/runner.html (running on local machine...)

But going to the actual site URL, the page renders with serious errors -- neither http://angular-michael/ng-yii/dev/ or http://angular-michael:3005/ can seem to connect to the back end -.I get a "Error!Status: undefined .Message from server: undefined" in the noty_bar.

from chrome tools console:
"Origin http://angular-michael is not allowed by Access-Control-Allow-Origin.".

it seems the headers are set in a non-cooperative way.... but I am having some trouble determining where that header is set... and why would the test pass but the site fail?

It also looks like localhost is being prepended to the YII_APP_BASE_URL I set:

"XMLHttpRequest cannot load http://localhost/angular-michael/api/collectionRest. Origin http://angular-michael is not allowed by Access-Control-Allow-Origin. "

Is there some special way to treat MAMP sites with local name resolution or something??

[kabasakalis]

It seems to be a problem with your local development environment configuration.I suggest you get rid of localhost by defining a virtual host.
There is no reason for localhost to be included in the app's AJAX request .Make sure you have the right settings in ng-yii / src / scripts / config / constants.js/
I can only give you my local settings and and it's up to you to transfer this to your local environment
So I have a virtual host yii.gr , in the root of this virtual host I have a folder yii_backend with my yii project and inside the project webroot I have ng-yii folder (my angular app)
If you have a relative URL make sure that there's no localhost in YII_APP_BASE_URL
.constant('YII_APP_BASE_URL', 'http://yii.gr/yii_backend/') //absolute base url of your Yii application,trailing slash included.
.constant('YII_APP_BASE_URL', '/../yii_backend/') //relative

[dzogchen]

I should add that if I uncomment the " Header always set Access-Control-Allow-Origin "*" " line in the .htaccess file (essentially leaving things wide open, I know....) it still has the same issue.

[kabasakalis]

there's nothing Header always set Access-Control-Allow-Origin "*" can do if your config settings are wrong.Please check constant.js file as suggested in my previous comment

[dzogchen]

I set up MAMP virtual host and have constant.js set up like this:

.constant('YII_APP_BASE_URL', 'http://angular-michael/')

at index.php I have
defined('LOCAL_DOMAIN') or define('LOCAL_DOMAIN','http://angular-michael/');

at http://angular-michael:3005/#/ the page renders but the rest call fails

OPTIONS http://angular-michael/api/collectionRest 500 (Internal Server Error) angular.js:10159
OPTIONS http://angular-michael/api/imageRest 500 (Internal Server Error) angular.js:10159

http://angular-michael/ng-yii/dev/ the page renders but still the same problem:

GET http://angular-michael/api/imageRest 500 (Internal Server Error) angular.js:10159
GET http://angular-michael/api/collectionRest 500 (Internal Server Error) angular.js:10159

when I run http://angular-michael/ng-yii/test/runner.html everything passes...

[kabasakalis]

What does the server 500 error report in your javascript console?It's good that localhost now does not appear in requests.

[kabasakalis]

..and what is your folder structure?Your setting implies that your virtual host webroot and your yii project webroot are the same,is that so?

[dzogchen]

I have a number of projects, each in a folder inside htdocs. I set up MAMP Pro with a host angular-michael, and pointed the directory at /Applications/MAMP/htdocs/angular-michael (a copy of the angular-yii directory re-named)

my urls are http://angular-michael:3005/ and http://angular-michael/ng-yii/dev/ on my dev machine

[kabasakalis]

Ok so your project root and host root are the same.What does the 500 error report?Look at the response in your javascript console,there should be a text description of the server error

[dzogchen]

I don't see any details at all that are reflective of an error message: just this (sorry - it looks a lot different pasted in...)

GET http://angular-michael/api/imageRest 500 (Internal Server Error) angular.js:10159
(anonymous function) angular.js:10159
sendReq angular.js:9980
$http.serverRequest angular.js:9757
wrappedCallback angular.js:7303
wrappedCallback angular.js:7303
(anonymous function) angular.js:7340
Scope.$eval angular.js:8685
Scope.$digest angular.js:8548
Scope.$apply angular.js:8771
(anonymous function) angular.js:986
invoke angular.js:2873
resumeBootstrapInternal angular.js:984
bootstrap angular.js:998
(anonymous function) bootstrap.js:1
GET http://angular-michael/api/collectionRest 500 (Internal Server Error) angular.js:10159
(anonymous function) angular.js:10159
sendReq angular.js:9980
$http.serverRequest angular.js:9757
wrappedCallback angular.js:7303
wrappedCallback angular.js:7303
(anonymous function) angular.js:7340
Scope.$eval angular.js:8685
Scope.$digest angular.js:8548
Scope.$apply angular.js:8771
(anonymous function) angular.js:986
invoke angular.js:2873
resumeBootstrapInternal angular.js:984
bootstrap angular.js:998
(anonymous function) bootstrap.js:1
stateEvent
Object {name: "$stateChangeSuccess", targetScope: Scope, preventDefault: function, defaultPrevented: false, currentScope: Scope}
currentScope: Child
defaultPrevented: false
name: "$stateChangeSuccess"
preventDefault: function () {
targetScope: Scope
proto: Object
angular.js:6173
event.currentScope
Scope {$id: "002", $$childTail: Scope, $$childHead: Scope, $$prevSibling: null, $$nextSibling: null…}
$$asyncQueue: Array[0]
$$childHead: Scope
$$childTail: Child
$$destroyed: false
$$isolateBindings: Object
$$listeners: Object
$$nextSibling: null
$$phase: null
$$prevSibling: null
$$watchers: Array[7]
$id: "002"
$parent: null
$root: Scope
$state: Object
$stateParams: Object
Collection: Object
Image: Object
collections: Array[0]
images: Array[0]
notyoptions: Object
spinneroptions: null
this: Scope
proto: Object
angular.js:6173
event.targetScope
Scope {$id: "002", $$childTail: Scope, $$childHead: Scope, $$prevSibling: null, $$nextSibling: null…}
angular.js:6173
FROM STATE angular.js:6173
FROM PARAMS Object {} angular.js:6173
TO STATE root angular.js:6173
TO PARAMS Object {} angular.js:6173

[kabasakalis]

I did'nt mean the js error stack.I meant the response from the server.I cannot help you without debugging info.Go to the network tab of your browser and examine the response from the server,there should be a text message besides the 500 code.

[dzogchen]

in the network tab there is no message next to the error, I can look at the request and response headers, but there isn't anything beyond 500 Internal Server Error

[kabasakalis]

Hard to believe there's no server message describing the error.I can't help you without this info.I am pretty sure there's some error in your configuration.Try browsing the app without the local node js server,use your MAMP stack server and see what happens.

[dzogchen]

OK, I rebooted, then started MAMP. I did not start the node server.
I went to http://angular-michael/ng-yii/dev/ - exactly the same result, still no more info.... I thought about uploading this to an actual (non-MAMP) server to see if the result is different - but since it is shared hosting I'm guessing there may be issues with node / npm / grunt.

[kabasakalis]

I still insist you must look at the network tab and see the text message that accompanies the 500 Internal Server error.I am attaching images from Chrome Network tab for the failed request,in case you are missing something.This is the best I can do for you...

[dzogchen]

Hi. I did that, and when I click on that tab, I get no message, only a large text in gray that says
"This request has no response data available"