ihue ihue - 4 years ago 251
HTTP Question

Allow CORS on Nginx to work with AngularJS HTTP GET

I kept getting this error in my console


XMLHttpRequest cannot load
http://d.biossusa.com/api/distributor?key=bunlongheng. No
'Access-Control-Allow-Origin' header is present on the requested
resource. Origin 'null' is therefore not allowed access.


I know that I have CORS issue, please don't tell me that.

I am trying to fix it. Please see my steps




I've tried



adding the config on my front-end side.

<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">

<p>Today's welcome message is:</p>
<h1>{{myData}}</h1>

</div>

<script>

var app = angular.module('myApp', []);

app.config(['$httpProvider', function($httpProvider) {
$httpProvider.defaults.useXDomain = true;
delete $httpProvider.defaults.headers.common['X-Requested-With'];
}

]);

app.controller('myCtrl', function($scope, $http) {
$http.get("http://d.biossusa.com/api/distributor?key=bunlongheng")
.then(function(response) {
$scope.myWelcome = response.data;
});
});


</script>





I've tried



adding the config on my back-end service side on my Nginx Configs.

I found this link on Nginx site = https://enable-cors.org/server_nginx.html

I've add that in my nginx config like this.

server {

listen 80;
server_name d.biossusa.com;
root /home/forge/d.biossusa.com/distributor-application/laravel/public;

# Enable this line for debugging to see which php.ini get use ... $php --ini
# root /home/forge/d.biossusa.com/public;


# FORGE SSL (DO NOT REMOVE!)
# ssl_certificate;
# ssl_certificate_key;

index index.html index.htm index.php;

charset utf-8;

location / {
try_files $uri $uri/ /index.php?$query_string;

if ($request_method = 'OPTIONS') {
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
#
# Custom headers and headers various browsers *should* be OK with but aren't
#
add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';
#
# Tell client that this pre-flight info is valid for 20 days
#
add_header 'Access-Control-Max-Age' 1728000;
add_header 'Content-Type' 'text/plain charset=UTF-8';
add_header 'Content-Length' 0;
return 204;
}


if ($request_method = 'POST') {
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';
add_header 'Access-Control-Expose-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';
}


if ($request_method = 'GET') {
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';
add_header 'Access-Control-Expose-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';
}


}

location = /favicon.ico { access_log off; log_not_found off; }
location = /robots.txt { access_log off; log_not_found off; }

access_log off;
error_log /var/log/nginx/d.biossusa.com-error.log error;

error_page 404 /index.php;

location ~ \.php$ {

fastcgi_split_path_info ^(.+\.php)(/.+)$;
fastcgi_pass unix:/var/run/php5-fpm.sock;
fastcgi_read_timeout 600;
fastcgi_send_timeout 600;
fastcgi_buffers 16 16k;
fastcgi_buffer_size 32k;
fastcgi_index index.php;
include fastcgi_params;

}

location ~ /\.ht {
deny all;
}

}





I don't know what else, I could really do to get rid of this error.

Any hints or directions on this will be much appreciated !!!




2nd Try



Updated Nginx Settings base on @Yaser Answer

server {

listen 80;
server_name d.biossusa.com;
root /home/forge/d.biossusa.com/distributor-application/laravel/public;

index index.html index.htm index.php;

charset utf-8;

location / {
set $cors '';
if ($http_origin ~ '^http?://(www\.d.biossusa\.com)') {
set $cors 'true';
}

if ($cors = 'true') {
add_header 'Access-Control-Allow-Origin' "$http_origin" always;
add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS' always;
}
}

location = /favicon.ico { access_log off; log_not_found off; }
location = /robots.txt { access_log off; log_not_found off; }

access_log off;
error_log /var/log/nginx/d.biossusa.com-error.log error;

error_page 404 /index.php;

location ~ \.php$ {

fastcgi_split_path_info ^(.+\.php)(/.+)$;
fastcgi_pass unix:/var/run/php5-fpm.sock;
fastcgi_read_timeout 600;
fastcgi_send_timeout 600;
fastcgi_buffers 16 16k;
fastcgi_buffer_size 32k;
fastcgi_index index.php;
include fastcgi_params;

}

location ~ /\.ht {
deny all;
}

}


Result :

XMLHttpRequest cannot load http://d.biossusa.com/api/distributor?key=bunlongheng. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. The response had HTTP status code 404.





3rd Try



server {

listen 80;
server_name d.biossusa.com;
root /home/forge/d.biossusa.com/distributor-application/laravel/public;

index index.html index.htm index.php;

charset utf-8;

location / {

try_files $uri $uri/ /index.php?$query_string;

set $cors '';
if ($http_origin ~ '^http?://(www\.d.biossusa\.com)') {
set $cors 'true';
}

if ($cors = 'true') {
add_header 'Access-Control-Allow-Origin' "$http_origin" always;
add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS' always;
}
}

location = /favicon.ico { access_log off; log_not_found off; }
location = /robots.txt { access_log off; log_not_found off; }

access_log off;
error_log /var/log/nginx/d.biossusa.com-error.log error;

error_page 404 /index.php;

location ~ \.php$ {

fastcgi_split_path_info ^(.+\.php)(/.+)$;
fastcgi_pass unix:/var/run/php5-fpm.sock;
fastcgi_read_timeout 600;
fastcgi_send_timeout 600;
fastcgi_buffers 16 16k;
fastcgi_buffer_size 32k;
fastcgi_index index.php;
include fastcgi_params;

}

location ~ /\.ht {
deny all;
}

}


Result

**XMLHttpRequest cannot load http://d.biossusa.com/api/distributor?key=bunlongheng. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.**

Answer Source

First of all you can't assign CORS permission from Angular, or generally on client side.

Then you don't have to repeat that line for every request type, simply put it the in root of your config file:

server {


    listen 8080;

    location / {

        if ($http_origin ~* (http:\/\/d\.biossusa\.com\S*)$) {
            set $cors "true";
        }

        if ($request_method = 'OPTIONS') {
            set $cors "${cors}options";
        }

        if ($request_method = 'GET') {
            set $cors "${cors}get";
        }
        if ($request_method = 'POST') {
            set $cors "${cors}post";
        }

        if ($cors = "trueget") {
            add_header 'Access-Control-Allow-Origin' "$http_origin";
            add_header 'Access-Control-Allow-Credentials' 'true';
        }

        if ($cors = "truepost") {
            add_header 'Access-Control-Allow-Origin' "$http_origin";
            add_header 'Access-Control-Allow-Credentials' 'true';
        }

        if ($cors = "trueoptions") {
            add_header 'Access-Control-Allow-Origin' "$http_origin";
            add_header 'Access-Control-Allow-Credentials' 'true';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
            add_header 'Access-Control-Allow-Headers' 'Authorization,Content-Type,Accept,Origin,User-Agent,DNT,Cache-Control,X-Mx-ReqToken,Keep-Alive,X-Requested-With,If-Modified-Since';
            add_header 'Content-Length' 0;
            add_header 'Content-Type' 'text/plain charset=UTF-8';
            return 204;
        }
    }
}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download